How To - Google Maps Integration in MashZone 2.0

One of the great new features in MashZone 2.0 is the possibilty to embed maps from Google Maps into a MashApp. This provides you with an extended form of viewing maps. Using the longitude and latitude, MashZone helps you find locations for display on the map. It is also possible to highlight the defined positions with the typical Google Maps pop-ups and flags. In this tutorial I will create a sightseeing MashApp, that represents the sights in Paris, London and Berlin.

Before we start, we have to overcome a few obstacles. We need a Professional or an Enterprise license that can be ordered at release, in order to incorporate Google Maps maps. We also need the API key provided by Google. Without this key it is not possible to select a Google Maps map in the MashZone Composer and then display it in the MashApp.

Now, we will switch to the administration area and open the server settings. The new option "Google Maps API key" appears, where we are asked to enter the API key.

To do so, we open the link "Register for Google Maps API". The following window is displayed:

First, accept the terms and conditions. The most important rule here is that the map material must be publically available for everyone. Of course, it is possible to create private MashApps, however a Google sales representative must be contacted before doing so.

In addition, we must enter the web site the MashZone server is active on. After reading and accepting the conditions, we click on "Generate API Key". We then receive a key that is unique for the domain as output. This key remains the same every time it is generated.

After successfully generating the key we open the feed editor. Once there, we select an Excel source and load the prepared file. It contains different locations with the respective zoom level and the longitudes and latitudes.

How do we get the coordinates we need? Unfortunately, Google Maps doesn't display them automatically. I have however, found two pages that make it easy to find exact positions. Simply open http://www.getlatlon.com/ or http://www.brandt.ch/bcc_geocoding.html, enter the desired address and the current geoinformation is displayed. If you keep the mouse button pressed on the map you can change the position and receive the geoinformation for the respective point on the map.

Now we can create an Excel table that for example, may look like this:

Each row stands for a certain point on the Google Maps map. It contains a position name, that is ideal for display in the tooltip. Of course, it is also possible to enter other values, such as the KPI. In addition, there are two columns with the latitude and longitude. Both coordinates are required to display a position.

If the standard settings are activated MashZone automatically zooms to the specified location. This can be circumvented by deactivating the setting and then setting the zoom level manually in the data feed. Please note that a value range from 1 – 18 is provided. However, for some cities images with a higher resolution may be available, which is why you can also enter higher values.

You could, for example create a selection box where the user can select directly from various zoom levels. Or, as in this example, you can use the manual entry if the automatic settings don't meet your requirements.

In order to switch from one sight to the next like a slide show, you must use a spin control and filter its name with the name of the Google Maps map. In the settings for this you can automatically start the selection and then have it change every few seconds. To allow the user to switch between cities you can insert a selection box that compares the current city with the city in the spin control.

Here is the final result:

For Fullscreen, click here.

Note: See this post for a list of other articles about MashZone 2.0. You might be also interested to join the ARIS MashZone group at ARIS Community.