Darren Ferguson - Weblog
Saturday, March 14, 2009
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.
Monday, March 16, 2009@9:47 AM
Wednesday, April 08, 2009@1:59 AM
var fm = {};
fm.maps = new Array();
Wednesday, April 08, 2009@8:46 AM
Monday, May 04, 2009@3:14 PM
very nice package do you have here
altough i might have a small issue
when doing the javascript call to google in the head. (the include)
you have to insert your API key again.
while it's already configured in the place.config file...
do i really have to store this key in 2 locations?
other than that, great easy to use package!
Thursday, May 14, 2009@11:46 AM
I have just installed your Google Map doc type and it installed seamlessly, so well done :)
Do you have an example of how to show multiple items on a single map? I have a collection of point which I would like to display on a single page and then if the user clicks the marker I need it needs to change the content of a DIV on the page (probably using AJAX) If you have an example of multiple node usage that would be a great step in the right direction!
Cheers,
Chris
Tuesday, July 21, 2009@4:51 PM
Wednesday, July 22, 2009@8:53 AM
I'm trying to show a map in a site but can only see the co-ordinates. I've added the jQuery, Google script and the javascript above in a script block. I've also created the mapdimensions class but still no joy. Any suggestions please - this will be perfect for us..
Cheers
Aron
Tuesday, August 18, 2009@5:35 PM
Thanks
Aron
Tuesday, August 18, 2009@6:37 PM
I'm in the same boat as Aron – I'm trying to show a map in a site, but can only see the coordinates. I've also added jquery, the Google API script and the javascript above to my main template, and added the mapdimensions class to the sites main css-file. I'm new to Umbraco and without any javascript-skills, and unlike Aron I can't seem to find the right combination.
Hope you can help!
Best regards,
Lars
Friday, September 11, 2009@10:41 AM
Friday, September 11, 2009@10:50 AM
Thanks for taking the time! ...I've currently hidden the page I'm testing from the main menu, so you'll need to use this direct link:
http://www.cafax.dk/forhandler-test.aspx
Thanks,
Lars
Sunday, September 13, 2009@9:56 AM
Tuesday, September 15, 2009@9:44 AM
Thursday, September 17, 2009@3:58 PM
I've wrapped the javascript up i a jquery document ready event (at least I think I have), and have tried every combination I could think of, but without luck. I've used the Developer Tools in Safari to check for errors, and it throws a "Parse error".
I will be immensely grateful if you could be persuaded to take one more look at the sourcecode – I'm certain that I'm making a mistake somewhere, but I can't find it.
/Lars
Tuesday, September 22, 2009@1:33 PM
I've been hacking a little more at it and gotten as far as the Javascript console telling me that "GMap2 is not defined". Any clues?
/Lars
Tuesday, September 22, 2009@3:56 PM
Tuesday, September 22, 2009@4:05 PM