Darren Ferguson - Blog
14 March 2009 at 09:36
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.
Written by: Darren Ferguson
16 March 2009 at 09:47
08 April 2009 at 01:59
var fm = {};
fm.maps = new Array();
08 April 2009 at 08:46
04 May 2009 at 15:14
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!
14 May 2009 at 11:46
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
21 July 2009 at 16:51
22 July 2009 at 08:53
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
18 August 2009 at 17:35
Thanks
Aron
18 August 2009 at 18:37
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
11 September 2009 at 10:41
11 September 2009 at 10:50
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
13 September 2009 at 09:56
15 September 2009 at 09:44
17 September 2009 at 15:58
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
22 September 2009 at 13:33
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
22 September 2009 at 15:56
22 September 2009 at 16:05
Would it be possible to email me a complete example, or is there some doc somewhere that I haven't seen yet?
Thanks!
Marc
29 March 2010 at 03:41
I've got one suggestion, should you make a new version (unless it already possible). can you increase the size of the map shown in the datatype/content node?
You see, at the moment I display the google map at 800x300 dimensions on the frontend, which shows more of the map than the content map does. So i'm looking for a way to determine the center of the map (or where the flag is shown).
anyway, great work!
30 March 2010 at 15:04
16 April 2010 at 14:07
14 July 2011 at 12:25
Thanks
Scott
01 February 2012 at 12:14
<script type="text/javascript">
$('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]);
var p = new google.maps.LatLng(lat, lon);
var myOptions = {
center: p,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
fm = new google.maps.Map(document.getElementById(mapId),
myOptions);
var marker = new google.maps.Marker({
position: p,
title:"We are here!",
animation: google.maps.Animation.BOUNCE
});
// To add the marker to the map, call setMap();
marker.setMap(fm);
});
</script>
22 March 2012 at 17:59
Thanks your answer:)
16 April 2012 at 12:10