Quick tip: Displaying maps on your Umbraco website

I've had a few requests to demonstrate how to show maps on your Umbraco based site using my Map/Place datatype.

The location you specify is stored as a latitude/longitude point with a Google maps specific zoom level. There are a number of different ways to display maps, but here is the method I used in my demo screen cast.

In your Umbraco template display the value of your map field:

<div id="map1" class="map">
<umbraco:Item field="place1" runat="server"></umbraco:Item>
</div>

Your template should include jQuery, the google maps API Javascript and the following javascript:

if (typeof ItemEditing == 'undefined') {
	$('div[class=map]').each(function() {

		$(this).addClass('mapdimensions');
		var mapId = $(this).attr('id');
		
		var value = $(this).html();
		value = $.trim(value);
		
		var point = value.split(',');

		var lat = parseFloat(point[0]);
		var lon = parseFloat(point[1]);
		var zoom = parseFloat(point[2]);
		
		fm.maps[fm.maps.length] = new GMap2(document.getElementById(mapId));
		var m = fm.maps[fm.maps.length-1];
		
		var p = new GLatLng(lat, lon);
		m.setCenter(p, zoom); 
			

		var marker = new GMarker(p);
		m.addOverlay(marker);	
	});

	......

Note that the test for the existence of the ItemEditing is checking whether Canvas is present or not. I'm not sure whether this is the best way to do this. Also note that I add a class mapdimensions to the element containing the map. You should define this CSS class with width and height properties to specify the dimension of your map.

If you want to display a static map you can use something like the following:

$('div[class=staticmap]').each(function() {

		$(this).addClass('mapdimensions');
		var mapId = $(this).attr('id');
		
		var value = $(this).html();
		value = $.trim(value);
		
		var point = value.split(',');

		var lat = parseFloat(point[0]);
		var lon = parseFloat(point[1]);
		var zoom = parseFloat(point[2]);

		var apiKey = '.....';
		
		var imgSrc = 'http://maps.google.com/staticmap?';
		imgSrc += 'center='+lat+','+lon;
		imgSrc += '&zoom=' + zoom;
		imgSrc += '&markers='+lat+','+lon+',blues';
		imgSrc += '&size=400x400';
		imgSrc += '&key='+apiKey;
			
		var imgTag = '<img height="400" alt="map" src="'+imgSrc+'" width="400">';
		$(this).html(imgTag);
	});

You should probably display a static map in an unobtrusive fashion (not using Javascript) and then replace it with a dynamic map if Javacsript is enabled. The example above are just to get you started and are by no means best practice.

Finally if you are displaying a static Google map using the img tag you should display an alt tag detailing what the map is e.g.

A map of Anfield Road in Liverpool, England. Latitude 50.17843 Longitude 0.1232

I consider this *very* important. I was recently party to a presentation given by Robin Christopherson of AbilityNet. Robin is blind and gave his presentation using a screen reader. I'd always imagined how small things like poorly written alt tags could make life difficult for impaired users, I now realise it makes life *impossible*.

Depending on interest there will be more information to come on maps, including how to display multiple markers on a map.

Comments

Leave a comment