Google Map UI

Proximity Data List with Map

Overview

1. Configure Geocoding configuration
2. Configure MapSupport files
3. Add reference to Google Maps API to site

Instructions

1. Configure “GeocodingConfig” Common Site Configuration in Titan Admin. This is for the proximity search feature on the DataList

If the “GeocodingConfig” parameter is not already configured, this will need to be done. Because the geocoding services have a maximum number of requests per API key, you will need one that is unique for the client site.

Here are the instructions to getting a new API key.

From the default “GeoCodingConfig”, change to API key to the project-specific project key.
<APIKey>{Add API Key Here}</APIKey>

Also, ensure that <AvailableForProximitySearch>1</AvailableForProximitySearch> is set to 1.

Example of properly configured

“GeocodingConfig” parameter in Titan Admin:

2. Configure MapSupport files

There are 3 main files used to support the map functionality

MapSupport.xsl

This file includes several templates to render the map components in the DOM. Ideally this would be added to the DataList/XSL folder and, if using a custom XSL, included at the top. For example:

<xsl:include href="DefaultCommon.xsl" />

<xsl:include href="MapSupport.xsl" />

MapHelpers.js

This file contains a JSON object with several functions to support the map. This is also where the map “push pin” image file is defined. Configure this file as the “Custom Javascript Source” for the Data List Display Template:

DataList/Support/MapHelpers.js

Also, go into MapHelper.js and define the 2 variables at the top of the document.

var mapPinImagePath = "/ClientCSS/images/{ClientFolder}/map_pin.png";
var mapAPIURL = "https://maps.google.com?saddr=Current+Location&daddr

3. Add reference to Google Maps API to site

Add script includes for Google Maps API at the appropriate level:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

On sites with maps on only specific pages, the script must be added as a page level snippet. If it placed in the global Pre/Post-Titan Metatags/Code Snippets, it will throw an error on pages without maps.

Page level snippet needs API key, like

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDIHTYKx_tTRZ7Xi2A6MsW-VY9NuMiZ0c4"></script>

GeocodingConfig in Common site Parameters also needs API key. API keys are stored in keepass after they are acquired:

<Geocoders>

<Geocoder>

<Name>Google Maps Geocoder</Name>

<Class>NorthwoodsSoftwareDevelopment.Cms.Utilities.GoogleMapsGeocoder, UISupport</Class>

<AvailableForProximitySearch>1</AvailableForProximitySearch>

<AvailableForIPSearch>0</AvailableForIPSearch>

<Parameters>

<APIKey>AIzaSyDIHTYKx_tTRZ7Xi2A6MsW-VY9NuMiZ0c4</APIKey>

<RequestParams></RequestParams>

</Parameters>

</Geocoder>

</Geocoders>

There is also .psd in the folder for changing the color of the pin image.

4. Add these customizations to your css (along with any others)

/* Map Customizations */

#MapControlDisplay {clear:right;}

.mapContain {width: 100%; height: auto;min-height:375px;}

.titanBody .mapContain img {max-width:none;}

@media screen and (min-width:980px){

div.DataList #MapControlDisplay {float: right;width:73%;}

}

5. At the bottom of the MapSupport.xsl, it is targeting specific column names. Make your columns to match or changes them in the xsl:

<xsl:template match="Node|Item" mode="transformToJSON">

<xsl:text>{</xsl:text>

<xsl:text>"Name": "</xsl:text>

<xsl:value-of select="Name"/>

<xsl:text>",</xsl:text>

<xsl:text>"Address1": "</xsl:text>

<xsl:value-of select="Address_1"/>

<xsl:text>",</xsl:text>

<xsl:text>"Address2": "</xsl:text>

<xsl:value-of select="Address_2"/>

<xsl:text>",</xsl:text>

<xsl:text>"City": "</xsl:text>

<xsl:value-of select="City"/>

<xsl:text>",</xsl:text>

<xsl:text>"PostalCode": "</xsl:text>

<xsl:value-of select="Zip_Code"/>

<xsl:text>",</xsl:text>

<xsl:text>"StateName": "</xsl:text>

<xsl:value-of select="State"/>

<xsl:text>",</xsl:text>

<xsl:text>"Latitude": "</xsl:text>

<xsl:value-of select="Coordinates/Latitude"/>

<xsl:text>",</xsl:text>

<xsl:text>"Longitude": "</xsl:text>

<xsl:value-of select="Coordinates/Longitude"/>

<xsl:text>",</xsl:text>

<xsl:text>"Phone": "</xsl:text>

<xsl:value-of select="Phone"/>

<xsl:text>",</xsl:text>

<xsl:text>"LinkParameter": "</xsl:text>

<xsl:value-of select="LinkParameter"/>

<xsl:text>",</xsl:text>

<xsl:text>"ItemDocID": "</xsl:text>

<xsl:value-of select="@DocID"/>

<xsl:text>",</xsl:text>

<xsl:text>"ItemName": "</xsl:text>

<xsl:value-of select="Name"/>

<xsl:text>"</xsl:text>

<xsl:text>}</xsl:text>

</xsl:template>

Use with Tabs

When using the map on an initially hidden tab, the map needs to be re-initialized.

References

• http://stackoverflow.com/questions/14044758/google-map-centers-at-top-left-corner
• http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture

This can be done by overriding the “ShowTab()” method and adding the following customization at the end.

ShowTab = function (ctl, blockID)

{

var container = ctl.parentNode

, tabLIs = container.getElementsByTagName("LI")

, selectedDiv = document.getElementById(ctl.id + "_Content")

, tabDIVs = document.getElementById("TabsContent_" + blockID).getElementsByTagName("DIV");

for (var ii = 0; ii != tabLIs.length; ++ii)

tic_Utilities.RemoveStyle(tabLIs[ii], "selected");

for (var ii = 0; ii != tabDIVs.length; ++ii)

tic_Utilities.RemoveStyle(tabDIVs[ii], "selected");

tic_Utilities.AddStyle(ctl, "selected");

tic_Utilities.AddStyle(selectedDiv, "selected");

 

// Custom: call maps API

var center = map.getCenter();

google.maps.event.trigger(map, 'resize')

map.setCenter(center);

}