Hi Dominic,

What have you tried so far that has not worked?

Embeding a google map into an Umbraco template is no different than adding one to an HTML page, so it should be as simple as finding a code sample online you like and pasting it into the template.

Rich

Hi,

thanks agian for you reply lol

I tried downloading some googlemap package which appeared to install google map data type, template, config file and some other stuff, it then asked me to input data into the config file but it was unclear and i got nowhere.

I also tried this site http://blog.darren-ferguson.com/2009/3/14/quick-tip-displaying-maps-on-your-umbraco-website.aspx.

Which contained a few things (which i will paste below) but i was unable to get that working either (which i thought might just be my lack of understanding)

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

Check this thread too.

http://our.umbraco.org/projects/backoffice-extensions/google-maps-datatype/bug-reports/21252-See-only-Coordinates

-Rajeev

Thanks alot, i will check this out :o)

Dominic, have you watched the free videos on the Umbraco.tv? http://umbraco.com/products/umbracotv

I have watched the introduction ones, i couldn't see one that was relevant to googlemaps so i have been hunting around the web all day

is working on a reply...