1. Prepare your DataPage(s)

    Before starting with the map mashup you must have created and deployed one or more Report DataPages. In this online HowTo site, you can learn how to import data or create tables and to create Report DataPages and deploy them to your site. Ensure the following with your DataPages:

    • If you are using geocoded fields (latitude and longitude), ensure six decimal points in your numbers. Open the Localization object used in your DataPage. Under Define Localization Settings section, click Formatting Standards and Number Type. Change the setting of Negative number format to –n and Digits after decimal to 6. (See image below).


    • Verify that your deployed DataPages are working properly on your web page.
  2. Use Wizard to Configure Your Map

    To configure your Map Mashup go to https://lib.caspio.com/MapMashup/ enter your Account Caspio URL or Integration URL and then log in. You also need Google Map API Key for the configuration. If you don’t have one yet you can get it here.

    The wizard is designed to be self-explanatory. Only select terms and sections that are described below.

    Step 1: General Map Settings

    • “Map it” and “View on map” refer to a link that map mashup allows you add to your DataPage results for each record. Depending on your setting, end users can plotted the record or bring up the InfoWindow by clicking on the link.

    • InfoWindow is the bubble of information that can be configured to popup on the map for a given point. The content of the bubble is customizable in this wizard.

    • Inline CSS allows advanced users format the map container.

    Step 2: Configure DataPages

    • Geo-code fields and address fields – Geo-code fields refer to a pair of latitude and longitude fields that may be in your table. If your data is not geocoded don’t select any fields and instead add all your address fields to the section below. Order is not important.

    • InfoWindow content – the field you choose here will be used as the content of map bubble.

    • Different markers based on criteria – You can setup any criteria and apply a marker icon to it. For example someone who may be publishing a database of businesses may use one custom icon for Gas Stations and another for Restaurants.

    • Criteria based filtering – lets your users hide or show plots for a given criteria. Using the example above, users can choose to hide all Gas Stations if this option is enabled.

    Step 3: Configure Criteria

    This step only appears if you have enabled criteria based markers for one or more DataPages.

    • Criteria – you can have one or more criteria for each of your DataPages. For example using the example above Gas Stations are one criteria and Restaurants are another.

    • Filters define the records that belong to the criteria. In the examples above, here you would be setting up something like BusinessType = ‘Gas Station’.

  3. Apply the Provided Code Segments

    On the last screen of the map mashup wizard multiple code segments are provided to you. One by one apply the code segments to the appropriate place. If you use iFrame deployment, the first code snippet should be placed in HTML Header of your DataPage results. Once all code segments are applied your map mashup should become fully operational.

    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>

    Please refer to Map Mashup Developer Reference for details about the mashup code.

Additional Enhancements:

“Map it” link now scrolls to the map

Clicking “Map it” will now automatically scroll the page to focus the user on the map.

Improved handling for Number fields

Fixed rendering issues displaying different markers based on numbers with currency and negative number formats. Also, latitude and longitude fields are no longer truncated when set to “Number” Datatype and “String” localization formatting.

Large text display on InfoWindow

Previously, Firefox and Chrome users could not view large amounts of text displayed in the InfoWindow. The InfoWindow now automatically displays as a percentage of the total window size.

WordPress deployment

Map Mashup v7 code snippets can now be deployed within WordPress.

Known issues

When using date and numeric comparisons in the Map Mashup criteria, the date and number fields should be formatted in the DataPage localization settings as follows:

  • Decimal symbols in numbers must use a period. (.)
  • Dates should be formatted as mm/dd/yyyy. Long date formatting (Month Day, Year) is only supported for American English localization. Other formats are not supported at this time.

Questions or Comments?

Submit your ideas and feedback regarding product features in the Caspio Ideabox.

Click here to load this Caspio Online Database.