Integrating GoogleMaps with Sitefinity DynamicModules

This blog post is a continuation of our previous example for Filtering Sitefinity DynamicContentView on the Frontend.

To provide a brief background in that post we demonstrated how you can easily create a widget that would display your dynamic module's content, and allow your users to filter this content dynamically on the frontend. Today's post will continue using the same sample, so we would strongly recommend checking the previous post for some further details.

For today's examples we want to extend the concept, and sprinkle some sugar on top, namely we would like to display our office locations on a map. The catch here is that as everything else in Sitefinity we want to make the product do the work for you, so any new offices that we create should be automatically added on the map for you.

The task can be split into two logical parts:

1. Providing the location of each office on the client

This task is quite easy - you can use your imagination and define any approaches that suit your particular template and use case scenario, however one of the simplest ways to go would be to add a field to our list template, which will display the location information. If you don't want this data displayed on the list template, though, you can just style it as display:none, for example:
That's it, part 1 is now completed.

2. What remains is getting the location for every item, and adding it as a marker on our map.

We'll be using the Google Maps Javascript API Version 3, which is now the official Javascript API Google has released for working with their GoogleMaps service.

To use the Google Maps Javascript API Version 3 you'll need to first reference it in the head section of your page. using our JavaScript widget you can very quickly add the link to http://maps.google.com/maps/api/js?sensor=false  and specify that it'd be included in the head tag of the page.

Next we can declare the div element that will host our map, and define the map itself:

Once we've done that we have to find all listed items and get their location data (by retrieving the values of our Locations field):
inside the addMarker() function we're resolving the passed address from above, using Google Maps Javascript API Version 3 Geocoding service, and adding each successfully resolved address as a marker on our map:
That's about everything you need to do in order to display your locations on the map.

For the sake of clarity we have created a new template, based on the one form the previous sample, if you have followed the above instructions properly, it should look something like this:
If you want to achieve the same result, but for a single location - when opening an item details view you can have that with some very slight modifications. Just go to our widget on the page (or Design -> Widgettempaltes->YourModuleType - full item content template), Edit it, and edit the Full item content template (under Single item settings tab).

Here's an example of a modified Full item content template for our module:
The complete sample - OfficesModuleGoogleMaps is attached to this blog post, and as usual, you can find a demonstrative video of the final results here.

A useful fact that you should be aware of, is that with our upcoming Sitefinity 6.0 release, you'll be able to display the single item location (including a Map location) out of the box.

Hope you enjoyed the sample, and stay tuned for the next one.