Implementing a rollout status map using Google Maps

If needing to present data that pertains to specific geographic locations, the logical approach is a map. Having just worked with Google Maps, and discovered how easy it is to implement, this article summarises all the key information needed to quickly make a map of your own.


After the fun of working out how to build these maps by hand, a colleague pointed out that there are online services available that can do all the hard work for you. One we tried, and recommend, was http://batchgeo.com/. Worth a look, even if you’re a masochist and want to go manually.

Getting started

All the information you need to work with Google Maps is published here:
http://code.google.com/apis/maps/documentation/javascript/basics.html

But all you really need to know for working it into your website is:

  • the API is in Javascript
  • it works very well with JQuery, and
  • it’s free (commercial or otherwise) unless you’re hitting their server big time.

Tempting? Read on.

Step 1 – Drawing a map on your site

The basic code to include a Google Map on your site is very straightforward. Start with this template:

<html>
<head>>
  <script type="text/javascript" 
          src="http://maps.googleapis.com/maps/api/js?sensor=false">
  
  
	function initialize() {
    		var myOptions = {
      		zoom: 5,
      		center: new google.maps.LatLng(-25.363882,131.044922),
      		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    
	var map = new google.maps.Map(document.getElementById("map_canvas"), 
                                      myOptions);

	}
  </script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

This will publish a Google Map, centred on Uluru, Australia, and zoomed to show the whole country. Play with the values in the options set to establish the default map you prefer.

Working with latitude and longitude

The centre of your map needs to be a position given in latitude and longitude. If you don’t happen to know the figures then there is a way to get them out of Google Maps.

  1. Go to the location you want the coordinates for
  2. Right-click on the location and select What’s Here from the menu


The coordinates you require will then appear when you hover over the location on the map. More usefully, they also are pasted into the search box, from where you can copy&paste them into your code.

Improvement 1: Adding points of interest

Each point you want to position on your new map is known as a marker.

http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers

It’s just one line of code to add one. Let’s put one at Mount Isa, near the centre of our new map.

var marker = new google.maps.Marker({
	position: new google.maps.LatLng(-20.722481,139.494781),  
	map: map,
	title: "Mt Isa"
	});


The value for map must match the map object you previously created. The marker will then appear at the position you give, with the title appearing on hover.

A fourth option, icon allows you to specify a different icon for your marker to the Google default hot air balloon. Any image file is satisfactory, but for a decent range of alternatives check out http://mapicons.nicolasmollet.com/.


To use, just upload the icon somewhere you can link to it, and add the URL to your marker:

var marker = new google.maps.Marker({
	position: new google.maps.LatLng(-20.722481,139.494781),  
	map: map,
	title: "Mt Isa",
        icon: "needsAttention.png"
	});

Adding a popup window

The title gives you room for brief information on the location, visible only on mouseover. For something a little more descriptive you can add a popup window to display when the user clicks on the point. The window remains in view until the user chooses to close it:

In Google Maps speak, these are known as InfoWindows. The key point when working with them is that you first need to create your window’s content (any valid HTML will do), and then you create the link so that the window appears when the user clicks on your marker.

	var info = "<p>Here's some extra information&lt/br />over two lines.</p>";
	google.maps.event.addListener(marker,'click', function() {
		infowindow = new google.maps.InfoWindow({content: info});
		infowindow.open(map, marker);
		});

Tips:

  • The marker in the final line must match the variable name for the marker you’re connecting to.
  • You can use any styling/layout tricks you want to make the popup look prettier.
  • Google will try and size it for you automagically, unless you force specific sizing.

Scaling for multiple points

The code so far is great for just a few points, but soon becomes painful with any reasonable number. Moreso if the information you want to present needs to change (e.g. a status message for each location is updated regularly).

So for the final version we’ll start leveraging JQuery and JSON to generate our markers from a separate list. For now we’ll keep that list in the same file, but it’s relatively simple to integrate via a different file or format.

First the data. Obviously this can be any values that you want to present, just ensure each record has the same structure.

var branches = 
[
	{
	"title":	"Uluru",
	"position":	[-25.363882,131.044922],
	"deploymentDate": "23 April 2012",
	"trainingDate": "13 March 2012",
	"status": "Not Started"
	},
	{
	"title":	"Alice Springs",
	"position":	[-23.700651,133.880038],
	"deploymentDate": "23 April 2012",
	"trainingDate": "13 March 2012",
	"status": "On Schedule"
	},
	{
	"title":	"Avalon Beach",
	"position":	[-33.636248,151.329197],
	"deploymentDate": "23 April 2012",
	"trainingDate": "13 March 2012",
	"status": "Needs Attention"
	},
	{
	"title":	"Kent St",
	"position":	[-33.866229,151.204190],
	"deploymentDate": "23 April 2012",
	"trainingDate": "13 March 2012",
	"status": "Not Started"
	}
]

Now the JQuery to loop through our data and add the markers:

$(branches).each(function() {
	var branch = this;
	var title = branch.title + ": " + branch.status;
	
//create the marker
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(branch.position[0], branch.position[1]),  
		map: map,
		title: title,
		});

//create the infoWindow
	var info = "<h2>" + branch.title + "</h2>";
	info += "<p>training date: " + branch.trainingDate;
	info += "<br />deployment date: " + branch.deploymentDate + "</p>";
	info += "<p>status: <b>" + branch.status + "</b></p>";
	
//link marker to infoWindow		
	google.maps.event.addListener(marker,'click', function() {
		infowindow = new google.maps.InfoWindow({content: info});
		infowindow.open(map, marker);
		});
});

Add this and the data into your initialise method. And remember to include the JQuery script reference in your head.

side note – How to publish this map in Sharepoint?

Adding this content to Sharepoint is complex because of the need to include the separate Javascript libraries. As a result the simplest approach is to use an iframe. Build your map as a standalone webpage, then embed it via an iframe defined within a Content Editor Webpart.

Conclusion

As you can see it’s reasonably simple to embed a smart map on your site that identifies and describes points of interest to your users.

If you want to try for yourself, here are some sample files to get you going:

  • simple/manual (1 marker, 1 window) – good template if only a small number of locations
  • multipoint (uses jQuery/JSON approach as described) – best if wanting to map too many points to manage manually.

If using the multipoint template, one “exercise for the reader” is to make it so that if a user has one infoWindow open, selecting a different point automatically closes the currently open window before opening the new one. Currently this code allows the user to open multiple windows simultaneously.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>