Map Mashup Instructions

Last updated July 13, 2007
Question? Post them on our forum.

New in Version 4:

• Hide map on search
• No body tag code
• More zoom options

Requirements:

• Caspio Bridge Value account or higher
• Register your domain for a Google or Yahoo! Maps API Key
  - Yahoo! Key: https://developer.yahoo.com/wsregapp/
  - Google Key: http://www.google.com/apis/maps/
  Note that Yahoo! is more forgiving with incomplete addresses.

Table of Contents

• 1. Caspio Bridge DataPage Setup
  • 1.1. Enable Parameters
  • 1.2. Hide Map During Search
  • 1.3. Define Your Fields on the Results Page
  • 1.4. Display Map on Detail Page (Optional)
• 2. Web Page Setup
  • 2.1. Paste Caspio Bridge Deploy Code
  • 2.2. Paste Map Deploy Code with Your API Key
• 3. Additional Customization Options

1. Caspio Bridge DataPage Setup

Configure your DataPage and map settings using the DataPage Wizard in Caspio Bridge.

1.1. Enable Parameters

On the first screen of the DataPage wizard, check Enable Advanced Options and Enable Parameters (Figure 1).

1.2. Hide Map During Search

Skip this step altogether if you selected Pre-defined Criteria as your search type in the DataPage wizard (Figure 2).

It is not necessary to initially display a default map next to your search form unless you are plotting data from the start. To hide the map on your search form, insert an HTML Block at the bottom of your DataPage elements in the "Configure Search Fields" screen in the DataPage wizard. Make sure no fields from your table appear below the HTML Block (Figure 3). Then copy and paste the following code into the HTML Block:

<style type="text/css">#map{display:none;}</style>

1.3. Define Your Fields on the Results Page

• 1.3.1. Insert an HTML Block at the bottom of your DataPage elements in the "Configure Results Page Fields" section of the DataPage wizard. Make sure no fields from your table appear below the HTML Block (Figure 4). Then copy and paste the following code into the HTML Block:

  <a href="#" id="cbMapPtr" onclick="showAddress('[@field:Address], [@field:City], [@field:State] [@field:Zip]','[@field:UniqueID]'); return false;">Map it</a>
  <div id="mapType" style="display:none">Y</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="plotMulti" style="display:none">Y</div>
  <div id="zoomLevel" style="display:none">12</div>
  <tt style="display:none">[@field:Address], [@field:City], [@field:State] [@field:Zip]</tt>
  <div id="iconDesc[@field:UniqueID]" style="display:none">[@field:Description]</div>
  <div id="home_position" style="display:none">1600 Pennsylvania Avenue NW Washington, DC 20500</div>

• 1.3.2. In the code, replace the field parameters in red with the corresponding field names from your table:
  • Address Fields:
    Replace [@field:Address], [@field:City], [@field:State] [@field:Zip] with the fields names in your table for address, city, state, and zip.
    • There are two occurrences of this string which must be updated in both places.
    • If your table contains a complete address in a single field, use only [@field:Address] and remove [@field:City], [@field:State] [@field:Zip] from the code.
    • If your data doesn't contain zip code information, it is recommended you use Yahoo! Maps and remove [@field:Zip] from the code.
  • Unique ID Field:
    Replace [@field:UniqueID] (two occurrences) with the name of your unique identifier field.
    • Your table must have a unique identifier field to use Google or Yahoo! Maps. This field must be unique either as an AutoNumber data type or a field you know is distinct for each record, such as a transaction number.
  • Description Field:
    If you have a field in your table that contains descriptive information for each record, replace [@field:Description] with the name of the field. This text will appear in the bubble that pops up over the selected point on the map.
    • If you don't have a description, leave this parameter unchanged and only the address will be displayed in the bubble.
• 1.3.3. The following map settings can be customized by replacing the variables below.

  Map Settings Legend

  mapType	Enter G for Google maps Enter Y for Yahoo! maps
  mapWidth	Width in pixels of your map
  mapHeight	Height in pixels of your map
  mapIcon	Enter preferred icon color as a number 1-10: = 1   = 2   =3   = 4   = 5 = 6   = 7   = 8   = 9   = 10
  plotMulti	Enter Y to plot all points during Results Page load. Enter N if you do not wish to plot all points.
  zoomLevel	Enter the zoom level as a value 1-16, where 1 is close and 16 is far away: 2 = street-level 9 = city-level 11 = state-level 14 = country-level
  home_position	Enter an exact address, city, state code, or zip/postal code for the opening position of the map: 1600 Pennsylvania Avenue NW Washington, DC 20500 Washington, DC DC 20500
  Map it	This 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.

• 1.4. Display Map on Detail Page (Optional)

  To display the map on the Details Page of each record:

  • 1.4.1. Insert an HTML Block at the bottom of your DataPage elements in the "Configure Details Page Fields" section of the DataPage wizard (Figure 5). Then copy and paste the following code into the HTML Block:

    <div id="dp" style="display:none">true</div>
    <div id="mapType" style="display:none">Y</div>
    <div id="mapWidth" style="display:none">500</div>
    <div id="mapHeight" style="display:none">500</div>
    <div id="zoomLevel" style="display:none">3</div>
    <span id="mapIcon" style="display:none">3</span>
    <div id="locAddress" style="display:none">[@field:Address], [@field:City], [@field:State] [@field:Zip]</div>
    <div id="idAddress" style="display:none">[@field:UniqueID]</div>
    <div id="iconDesc[@field:UniqueID]" style="display:none">[@field:Description]</div>
    

  • 1.4.2. Repeat your address field definitions and map settings as needed, as explained in Section 1.3.2 above.
  • 1.4.3. Replace [@field:UniqueID] with the name of your unique identifier field, as explained in Section 1.3.2 above.
  • 1.4.4. Replace [@field:Description] with the name of your description field, as explained in Section 1.3.2 above.

2. Web Page Setup

You will need access to your web page source to deploy the DataPage and map.

• 2.1. Paste Caspio Bridge Deploy Code

  To deploy your DataPage, select it in Caspio Bridge and click the Deploy button.

  • 2.1.1. Copy the deploy code to your clipboard and click "Deploy" (Figure 6).
  • 2.1.2. Paste the deploy code on your web page where you want it to appear.

• 2.2. Paste Map Deploy Code with Your API Key

  • 2.2.1. Paste either the Google or Yahoo! deploy code in your web page after the Caspio Bridge deploy code.
    
    Google Maps Deploy Code:

    <script type="text/javascript" src="http://www.google.com/jsapi?key=YourKeyHere"></script>
    <script type="text/javascript">google.load("maps", "2");</script>
    <script type="text/javascript" src="http://bridge.caspio.net/scripts/caspio_mashupsv4.js"></script>

    OR
    
    Yahoo! Maps Deploy Code:

    <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.4&appid=YourKeyHere"></script>
    <script type="text/javascript" src="http://bridge.caspio.net/scripts/caspio_mashupsv4.js"></script>

  • 2.2.2. Replace YourKeyHere with your API Key registered for your domain.

-- You are finished. Your mashup should be fully functional. --

3. Additional Customization Options

Display Map on Search Page

To display the map with your search form, insert an HTML Block at the bottom of your DataPage elements in the "Configure Search Fields" section of the DataPage wizard. Make sure no fields from your table appear below the HTML Block
(Figure 7). Then copy and paste the following code into the HTML Block:

<div id="mapType" style="display:none">Y</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="plotMulti" style="display:none">Y</div>
<div id="zoomLevel" style="display:none">9</div>
<div id="home_position" style="display:none">1600 Pennsylvania Avenue NW Washington, DC 20500</div>

Map Positioning

By default, the map displays 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>

Map Border and Margin

By default, the map has a gray border and a 5 pixel margin above and below it. To customize these attributes, use the following code instead of the code provided above for "Map Positioning" and customize the style items in red.

<div id="map" style="border: 1px solid #000000; margin: 5px 0 5px 0;"></div>

• Border format: size type color
• Margin format: top right bottom left