Google Map with layer toggle

Back in the days web designers could scan or draw a map and put it on the web but it was still very static. Maybe a user is interested, from his point of view, in an area or zoom level not covered on the static map?

The Maps service of Google, initially called Local, revolutionized the way we look at locations on the web. Google Maps gives the user lots of freedom, zooming in and out on the map, changing the maptype from roadmap to satellite, or searching for directions between two points.

It is very easy to embed a simple Google Map on a website. Go to Google Maps, give in an address, click on Link and the code within an iframe will be included. Google also gives us the opportunity to customize the size of the map.

While this is great, it only shows one point on the map. In some occasions, for example an event in a city, you want to show more points on the map. You could generate ten little maps with the tools Google provides us but that would look a little awkward. I will explain how to include a map with a custom checkbox, so the user has different proposed layers to show or hide.

Google Maps connected to Fusion Tables

Google Fusion Tables is one of the newer features from Google. The data is stored in tables but can also be shown as charts or on a map. One of the biggest advantage of Fusion Tables lies in the fact that it gives end users the possibility to change the data accordingly. The coding can be done in advance and then the end user can change the addresses in the Fusion Tables.

I searched for some public tabels with the localization of supermarkets and museums in Brussels. Not all the data is as clean as it could be but it gives a good indications of easy adjustments with basic data sets.

First, we insert the Fusion Table layers inside the Javascript code, directly followed by the initialisation function:

// List with Fusion Tables. Upper layer must be the last one in the list. 
var tableId2 = 1933726; // Brussels museums
var tableId1 = 3084017; // Brussels supermarkets

var layer1 = new google.maps.FusionTablesLayer(tableId1);
var layer2 = new google.maps.FusionTablesLayer(tableId2);

function initialize() {
	var myLatLng = new google.maps.LatLng(50.85034,4.35171); // Map is centered here  
	var myOptions = {
		zoom: 14,
		center: myLatLng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
		
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
		
	layer1.setMap(map);
	layer2.setMap(map);

}

In the next step we select the fusion table layers. Note the ID to target the specific layer with HTML.

function changeLayer(tableidselections) {

	if (tableidselections == 3084017){
		 if (document.getElementById("supermarkets").checked == true) {
		   if(layer1.getMap() == null) { layer1.setMap(map); }
		 }
	
		 if (document.getElementById("supermarkets").checked == false) {
			 layer1.setMap(null);  /*layersetoff*/
		 }
	
	}
	
	if (tableidselections == 1933726){
		 if (document.getElementById("museums").checked == true) {
		   if(layer2.getMap() == null) { layer2.setMap(map); }
		 }
	
		 if (document.getElementById("museums").checked == false) {
			 layer2.setMap(null); /*layersetoff*/
		 }
	}
	
}

Next, we have to initialize the map and put an onclick event on the checkboxes:

Supermarkets
Museums

See this link for a working example.

Google Maps using KML

The kml feature is also very handy. Create some files in Google Earth and save each layer as kml or kmz. Then link these files in the following way:

First we initialise the map (see the API documentation on the page from Google) and in the same function we make an array of all the layers:

var map;

  function initialize() {
    var myLatLng = new google.maps.LatLng(50.860889,4.357688);
    var myOptions = {
      zoom: 14,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

layers [0] = new google.maps.KmlLayer('http://www.bramvandenbulcke.be/maps/vlaanderen-bereikbaarheid/gebouwen.kmz', 
  {preserveViewport: true, suppressInfoWindows: false});
layers [1] = new google.maps.KmlLayer('http://www.bramvandenbulcke.be/maps/vlaanderen-bereikbaarheid/haltes.kmz', 
  {preserveViewport: true, suppressInfoWindows: false});
layers [2] = new google.maps.KmlLayer('http://www.bramvandenbulcke.be/maps/vlaanderen-bereikbaarheid/fietsroutes.kmz', 
  {preserveViewport: true, suppressInfoWindows: false});
layers [3] = new google.maps.KmlLayer('http://www.bramvandenbulcke.be/maps/vlaanderen-bereikbaarheid/fietsenstallingen.kmz', 
  {preserveViewport: true, suppressInfoWindows: false});
for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(null);
      }
  }

Note the 'preserveViewport: false' toggle, which is saying to show the contents of the last checked checkbox. Finally we loop through the array and make a toggleLayer() to show or hide a specific layer:

function toggleLayer(i) {
  if (layers[i].getMap() === null) {
    layers[i].setMap(map);
  }
  else {
    layers[i].setMap(null);
  }
}

The layer is shown with HTML in an easy way:

Gebouwen
Haltes
Fietsroutes
Fietsenstallingen

Using kmz/kml in combination with the Google Maps API also tackles the profound weakness of Google Earth being unable to show a normal map. See this link for a working example.

Styling the map with CSS

This depends on the styling of the site but wouldn't it be neat to show the menu as overlay on the website. With specific styling we can make the menu transparent and with some Javascript the menu can be made foldable.

First, we clear the standard browser margin and padding:

html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }

Then we target the canvas on the map and we give it the full height. This can also be a height and width in pixels depending on the situation:

#map_canvas { height: 100%; }

Finally we put the checkboxes on the top right with absolute positioning in some corner of the window (in this case: top right):

#checkboxes { 
	position: absolute; 
	top: 50px; 
	right: 10px;
	font-family: 'arial', 'sans-serif'; 
	font-size: 14px;
	background-color: white;
	border: 1px solid black;
	padding: 10px 10px 0px 10px;
	}