Basic Map Mashup Instructions

We have put together a quick guide and ready-made scripts to make map mashups with Caspio Bridge as easy as possible.

Below are instructions for both Yahoo! and Google Map services, however, you only need to follow one or the other. In our experience, Yahoo! maps are more forgiving when plotting addresses. With Google maps, expect to get error alerts for addresses with the slightest imperfection.

Step 1 – Get Your Map API Key

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:

Yahoo! API Key: https://developer.yahoo.com/wsregapp/
Google API Key: http://www.google.com/apis/maps/

Step 2 – Web Page Setup

You need to deploy two code snippets on your web page. This is in addition to your Caspio Bridge deploy code.

1. The first snippet identifies your API Key and should be placed toward the top of your page (before the other code snippet).

[+] Show Yahoo! Maps Code

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=[YourOwnAPIKey]"></script>

<script type="text/javascript" src="http://bridge.caspio.net/scripts/yahoomapslite.asp"></script>

[+] Show Google Maps Code

<script src="http://maps.google.com/maps?file=api&v=2.x&key=[YourOwnAPIKEY]" type="text/javascript"></script>

	<script type="text/javascript" src="http://bridge.caspio.net/scripts/googlemapslite.asp"></script>

Replace [YourOwnAPIKey] with the key that you have received from Yahoo! or Google.

Optional Map Customizations:

Additional mapping parameters can be appended to the second script (yahoomapslist.asp or googlemapslite.asp) for additional control:

lat: latitude of initial map
long: longitude of initial map
zoom: initial zoom level from 1 to 16, 1 is closest and 16 is the farthest out
ssl: set ssl=1 if your page is encrypted, and change all instances of "http" to "https" for all scripts in this entire document

Here is an example of a fully parameterized call for lat, long, zoom and ssl:

<script type="text/javascript" src="https://bridge.caspio.net/scripts/yahoomapslite.asp?lat=37.16&long=-95.80&zoom=4&ssl=1"></script>

2. The next code snippet defines your map container and location on the page. Place it where you want the map to appear and adjust the width, height, border and other styling properties as you wish.

[+] Show Code

<div id="mapContainer" style="height:400px; width:500px; border:double;"></div>

Step 3 – DataPage Setup

For Search Forms

Preparing your DataPage is as simple as copying and pasting some ready-to-use JavaScript and inserting your address fields as parameters into certain parts of the provided code. You must also have a unique identifier field in your table. An AUTONUMBER field works perfectly.

1. On the first screen of the DataPage wizard, enable Advanced Options and Parameters for your Search and Report DataPages (Figure 1).

2. Put this code in your Search Form's Footer (Figure 2):

[+] Show Code

<script language="javascript">
   window.onload=loadMap; 
</script>

For Results Pages

1. In Results Page configuration screen, insert an HTML Block and paste in this JavaScript code snippet (Figure 3):

[+] Show Code

<div id="cbAddressMrk[@field:RecID]" style="display:none;">[@field:Address], [@field:City], [@field:State] [@field:Zip]</div>

<div id="cbTitleMrk[@field:RecID]" style="display:none;">[@field:Name]</div>

<div id="cbZoomMrk[@field:RecID]" style="display:none;">4</div>

<div id="cbIconMrk[@field:RecID]" style="display:none;">0</div>

<a href="#" onclick="getmap([@field:RecID]);">Map it</a>

DataPage Parameters:

Address: Replace [@field:Address], [@field:City], [@field:State] [@field:Zip] with corresponding field names from your table.
Location name: [@field:Name] identifies the title that you would like to show in the map's pointer. Use any of your fields, static text or even an empty string. Whatever that best identifies an address.
AUTONUMBER: [@field:RecID] refers to your unique key or identifying field. This parameter appears a few times in this script. Make sure to replace all instances to your own identifier or AUTONUMBER field name.

Optional Customizations:

Link: "Map it" is the clickable label for users to plot the address on the map. You can change this label to any other text or an HTML image tag.
Zoom signifies the zoom level of your map and can range from 1 to 16 with 1 being closest and 16 being the farthest away. Our default above is 4.
Icon refers to the icon pointer that displays inside the map, with 0 being the default icon provided by Google and Yahoo!.

Caspio has also provided additional icon choices in several colors, each with an associated value for the JavaScript call:

= 1

= 2

= 4

= 5

= 6

= 7

= 8

= 9

= 10

2. In Results Page configuration screen, insert this code in the Footer without any modification (Figure 4):

[+] Show Code

<script language="javascript">
function getmap(rowID){
  var myAddress=null; 
  var myZoom=null; 
  var myIcon=null; 

  myAddress = document.getElementById('cbAddressMrk'+ rowID).innerHTML; 
  myTitle= document.getElementById('cbTitleMrk'+ rowID).innerHTML; 
  myZoom= document.getElementById('cbZoomMrk'+ rowID).innerHTML; 
  myIcon= document.getElementById('cbIconMrk'+ rowID).innerHTML; 
  
  try {
    showAddress(myAddress,myTitle,myZoom,myIcon); 
  } catch(err) {
  } 
}

window.onload=loadMap; 
</script>

For Details Pages

1. For displaying the map in your Details Page, insert this code segment in an HTML Block in the Details Page:

[+] Show Code

<div id="cbAddressMrk" style="display:none;">[@field:Address], [@field:City], [@field:State] [@field:Zip]</div>

<div id="cbTitleMrk" style="display:none;">[@field:Name]</div>

<div id="cbZoomMrk" style="display:none;">4</div>

<div id="cbIconMrk" style="display:none;">2</div>

(See the DataPage Parameters above for field replacement details. Note that Details Pages do not require the AUTONUMBER field.)

2. In Details Page configuration screen, use this code snippet in the Footer without any modification (Figure 5):

[+] Show Code

<script language="javascript">
function hideMe() {
  var x = document.getElementById("cbAddressMrk").parentNode.parentNode;
  x.parentNode.removeChild(x);
}

function loadme() { 
  loadMap(); 
  var myAddress=null; 
  var myZoom=null; 
  var myIcon=null;
    
  myAddress = document.getElementById("cbAddressMrk").innerHTML; 
  myTitle = document.getElementById("cbTitleMrk").innerHTML; 
  myZoom= document.getElementById("cbZoomMrk").innerHTML; 
  myIcon= document.getElementById("cbIconMrk").innerHTML;
    
  try { 
    showAddress(myAddress,myTitle,myZoom,myIcon); 
  } catch (err) {
  } 
  hideMe(); 
} 

window.onload=loadme; 
</script>

3. Deploy your DataPage on your web page. Your mashup should now be fully functional.

Did you run into a question or problem? Discuss it on the Caspio user community forums.