Update on Yahoo! Maps Termination:

As of September 2013, Yahoo! terminated their free Maps Web Services, and as a result, Yahoo! map mashups are no longer supported. If you are currently using Yahoo! Maps in your existing mashups, read the FAQ for upgrade instructions.

Steps to Configure Map Mashup

Prerequisites:

In this article, you configure an existing Report DataPage and map settings using the DataPage wizard in Caspio Bridge.

  1. Navigate to the DataPages listing of an app and select a Report DataPage. Click Edit.
  2. On the Search Type screen, you can choose to allow an interactive search or pre-defined criteria in your DataPage. If you decide to filter data based on pre-defined criteria, you may proceed to the next step.
  3. On the DataPage Datasource screen of the DataPage wizard, check Enable Advanced Options and Enable Parameters.
  4. If you wish to present a search form to users, 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, proceed to the Configure Search Fields screen and insert an HTML Block at the bottom of your DataPage elements 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:
    <style type="text/css">#map{display:none;}</style>
  5. Proceed to the Configure Results Page Fields screen. Insert an HTML Block at the bottom of your DataPage elements. Make sure no fields from your table appear below the HTML Block. 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>
  6. 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.
    • 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 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.

    The following map settings can be customized by replacing the variables below.

Map Settings Legend

mapTypeEnter G for Google mapsEnter Y for Yahoo! maps
mapWidthWidth in pixels of your map
mapHeightHeight in pixels of your map
mapIconEnter preferred icon color as a number 1-10:

= 1= 2=3= 4= 5
= 6= 7= 8= 9= 10
plotMultiEnter Y to plot all points during Results Page load.Enter N if you do not wish to plot all points.
zoomLevelEnter 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_positionEnter 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 itThis 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.

7. On the Configure Details Page Fields screen, insert an HTML Block at the bottom of your DataPage elements. 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>

You can replace field parameters with corresponding field names in your table:

Repeat your address field definitions and map settings as needed. Replace [@field:UniqueID] with the name of your unique identifier field. Replace [@field:Description] with the name of your description field. You can use step 5 as reference.

Click Finish.

  1. Once the DataPage has been configured with map mashup, you will need access your web page source to deploy the DataPage and map.
  2. To deploy your DataPage, select the DataPage you just modified and click Deploy.
  3. Next, paste the deploy code on your web page where you want it to appear. You can paste either the Google deploy code in your web page after the Caspio Bridge deploy code.

Google Maps Deploy Code:

<script src="http://www.google.com/jsapi?key=YourKeyHere"></script>

<script>google.load("maps", "2");</script>

<script type="text/javascript" src="http://lib.caspio.com/pub/jquery/jquery.js"></script>

<script type="text/javascript" src="http://lib.caspio.com/pub/mashup/caspio_mashupsv4_jq.js"></script>

You have successfully integrated map mashup in your Search and Report DataPage. Your mashup should be fully functional.

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 screen 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:

<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="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 style="border: 1px solid #000000; margin: 5px 0 5px 0;"></div>
  • Border format: size type color
  • Margin format: top right bottom left

Note 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.