Google Maps for Sitecore

Finally the Advanced Sitecore Google Maps (WCAG Edition) for Sitecore has been upgraded to use the V3 API of Google Maps. Advanced Sitecore Google Maps is a commercial module for Sitecore that allows you to add Google Maps to your Sitecore solution and still comply to the accessibility requirements from WCAG.

Advanced Sitecore Google Maps

Advanced Sitecore Google Maps

The module works with Sitecore 6 and with the Sitecore Page Editor from Sitecore 6.4. A number of improvements have been made since the previous version. Setting up the map center and initial zoom level is still done by either entering an adress or simple by dragging and zooming on a map. But other settings such as seleting zoom control, map types, enabling street view and control positions have been moved. All the common user needs to select is the overlays, the presentation (the “view”) and the options:

Google Map Editor

Google Map Editor

One of the key features of the module is the ability to add extra visual elements to the map simply by adding user controls to “views”. The module comes with a set of views including an accessibility list. Adding this list allows you to add maps to your solution and still comply with WCAG rules by offering navigation possibilities for visually impaired.

Google Map with Accessibility list

From the developer standpoint the module has been greatly improved. The rendering of maps is now done using Sitecore pipelines. This allows you as a developer to modify the Google Map JavaScript created by the module, or to add your own Google maps functionality.

This is an example on how to add weather and cloud overlays. First I create a pipeline processor:

using PT.GoogleMaps.Core.Pipeline.RenderMap;

namespace PT.Map
  public class RenderWeatherLayer
    public void Process(RenderMapArgs args)
      args.JavaScript.AppendLine("    var weatherLayer = new{");
      args.JavaScript.AppendLine("      temperatureUnits:");
      args.JavaScript.AppendLine("    });");
      args.JavaScript.AppendFormat("    weatherLayer.setMap({0});\n", args.RenderSettings.MapClassName);
      args.JavaScript.AppendLine("    var cloudLayer = new;");
      args.JavaScript.AppendFormat("    cloudLayer.setMap({0});\n", args.RenderSettings.MapClassName);


Then I add the processor to the pt_googlemaps_v3_rendermap pipeline by adding an include file to /App_Config/Include:

<configuration xmlns:patch="" xmlns:x="">
      <setting name="PT.GoogleMaps.Libraries" value="weather" />
        <processor patch:after="*[@type='PT.GoogleMaps.Core.Pipeline.RenderMap.RenderEvents, PT.GoogleMaps.Core']" type="PT.Map.RenderWeatherLayer, PT.Map"/>

And the weather and cloud overlay is now on my map:

Google Map Weather and Cloud Map

Google Map Weather and Cloud Map

Here is a summary of the most important features:

  • Add Google Maps to any page.
  • Support for Sitecore Page Editor and Sitecore Shell.
  • The following overlays are supported out of the box: Markers, lines, polygons, rectangles, circles and images.
  • Group overlays for easy deploy to a map.
  • Add WCAG compliant maps by adding accessibility lists to the page.
  • Select between many views: Map, map with accessibility list, map with group selector, map with 3-level group selector, static image, “Find nearest” and combination of all.
  • Create your own views simply by adding user controls to the page.
  • Control map settings: Map types (roadmap, hybrid, satellite and terrain), zoom-in/zoom-out, disable double click, disable scroll, enable street view
  • Control map control positions. Specify position and appearance of overview, pan, rotate, scale and zoom controls
  • Create static maps using the Google Static Maps API.
  • Pipeline-based map rendering. Create your own layers or add functionality by adding pipeline processors.

Contact Pentia A/S for licensing information.

And check out the demo here:


About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in c#, General .NET, Sitecore 6 and tagged , , , . Bookmark the permalink.

3 Responses to Google Maps for Sitecore

  1. Nikolai says:

    Is there a possibility to link point information to site pages? We would like to make a map of our projects in a particular city so that people can click the map and see the information with links to pages.

  2. briancaos says:

    Yes links are support out of the box. The speech bubble that pops up contains a standard Sitecore Rich Text field, and the marker template has a link field, so there is 2 possibilities.
    And for more advanced stuff, you simply extend the module pipeline, adding all the stuff you need.

  3. Pingback: Advanced Sitecore Google Maps (WCAG Edition) | Brian Pedersen's Sitecore and .NET Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s