Map Mashup Instructions

Mashup Requirements:

• Caspio Bridge Lite account or higher
• Register your domain for a Google or Yahoo! Maps API Key-
  • Yahoo! Key: https://developer.yahoo.com/wsregapp/
  • Google Key: http://code.google.com/apis/maps/signup.html
• Note that Yahoo! is more forgiving with incomplete addresses.
• Geocoding Services are available to improve the performance of Google maps.

1. Caspio Bridge DataPage Setup

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

1.1. Enable Parameters

On the second screen of the DataPage wizard, check Enable Advanced Options and Enable Parameters.

1.2. Hide Map During Search

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

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. Then copy and paste the following code into the HTML Block:

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. Then copy and paste the following code into the HTML Block:

• 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 mapsEnter 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. Then copy and paste the following code into the HTML Block:

 

• 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".
• 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:

OR

Yahoo! Maps Deploy Code:

• 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. Then copy and paste the following code into the HTML Block:

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:

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.

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

Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.