Map Mashup Instructions (Version 3)

New in This Version:

Simplified deployment steps
Same code and process for both Yahoo! and Google maps
One solution for both single- and multi-point plotting

Step 1: Get Your API Key

Decide if you want Yahoo! Maps or Google Maps. Yahoo! Maps tend to be more forgiving with incomplete addresses. Both Google and Yahoo! require that you register your domain name and get your site-specific key. Get your free key from the appropriate site:

For Yahoo! Maps go to https://developer.yahoo.com/wsregapp/
Example key: M_l9qT3V34GU8JXeYXxGxkKxrUQpv.O5kn2VERNpvsaX5NxJaZg--
(Note that the two hyphens at the end are part of the key and are required if your key includes them.)
For Google Maps go to http://www.google.com/apis/maps/
Example key: ABQIADAAznxIUC8uGpuLsav4D3bRRTSMHePmTwCNzP4s-jDwlPA97iig

Step 2: Modify Body Tag

Modify your body tag in your page:

<body onLoad="loadMap(mapType,mapWidth,mapHeight)">

If your body tag contains other parameters, simply add the onLoad event shown above to the existing tag. If you already have an onLoad event in your body tag, then add a semicolon inside double quotes and append our function to the existing onLoad event:

onLoad="function1;function2; loadMap(mapType,mapWidth,mapHeight)"

Step 3: Place Map on Your Results Page

In Caspio Bridge DataPage wizard, go to where Results Page fields are configured and add an HTML Block as the last element. Paste the following code inside the HTML Block:

<a href="#" id="cbMapPtr" onclick="showAddress('[@field:Addr]',[@field:id_location],1,7); return false;">Show on map</a>
<div id="mapType" style="display:none">G</div>
<div id="mapWidth" style="display:none">1000</div>
<div id="mapHeight" style="display:none">800</div>
<span id="mapIcon" style="display:none">3</span>
<div id="plotMulti" style="display:none">Y</div>
<tt style="display:none">[@field:Addr]</tt>
<div id="iconDesc[@field:id_location]" style="display:none">[@field:Description]</div>
<div id="home_position" style="display:none">CA</div>

Complete the following:

Replace Addr in [@field:Addr] with your field name that holds address information. If your address fields are broken up into separate fields for street, city, etc. then you will have to construct the address like [@field:address], [@field:city], [@field:state] [@field:zip] and replace address, city, state, and zip with the field names of your table.
Replace id_location in [@field:id_location] (two occurrences) with the name of your unique identifier field.
Replace Description in [@field:Description] with the name of the field containing a descriptive text of the plotted items. This text will appear in the bubble that pops up over the selected point on the map. You can leave this blank and only the address will be displayed in the bubble.
mapType – Insert G for Google or Y for Yahoo! maps
mapWidth – Width of your map in pixels
mapHeight – Height of your map in pixels
mapIcon – Identifies the icon used to plot points on the map as an integer between 1 – 10.

= 1

= 2

= 4

= 5

= 6

= 7

= 8

= 9

= 10

plotMulti – Insert Y if you would like to plot all addresses on the map, and N if you do not wish to plot points when the page loads.
home_position – Enter an exact address, or city, state, or just a state to specify the opening position of the map.

Step 4: Place Map on Your Details Page

This is an optional step. If you do not have a details page, skip this step and go to Step 5.

On your Results Page, add an HTML Block as the last element and paste the following code inside the HTML Block:

<div id="dp" style="display:none">true</div>
<div id="mapType" style="display:none">G</div>
<div id="mapWidth" style="display:none">500</div>
<div id="mapHeight" style="display:none">500</div>
<span id="mapIcon" style="display:none">3</span>
<div id="locAddress" style="display:none">[@field:Addr]</div>
<div id="idAddress" style="display:none">[@field:id_location]</div>
<div id="iconDesc[@field:id_location]" style="display:none">[@field:Description]</div>

See Step 3 for the explanation and options for the parameters that must be customized in this code.

Step 5: Add JS Include Files and Specify Map Placement

You must add two JavaScript code segments to your web page. Both of these code segments must be placed after the Caspio Bridge DataPage deploy code.

The first segment is different for Google and Yahoo! maps, so select the one for your map choice:

For Google Maps use this code:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=YOURKEYHERE"></script>
For Yahoo! Maps use this code:
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=YOURKEYHERE"></script>

Replace YOURKEYHERE with your API key from Step 1.

Next, place the following code in your web page somewhere after the code above:

<script type="text/javascript" src="http://bridge.caspio.net/scripts/caspio-mashups.js"></script>

By default, the map will display right above your DataPage. If you want to place your map in a different area of your page, place the following code there:

<div id="map"></div>

Any question or problem? Discuss it on the Caspio user community forums.