Have you got jQuery installed and referenced in your HTML?

I would agree with Dan, it sounds like jquery is missing. I've had this before.

Thanks for the responses, please bare with me because I am not all that experienced with jquery but is that not what the following code is:

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

And I have put the jquery-1.4.1.min.js file I downloaded from the Jquery website in my scripts folder.

Move the include of jquery so it is before the include of your own JS.

Let me know if that helps?

Doh, yeah, I missed that you'd got that in there - I'm used to seeing it above other js inclusions, so I'd definitely second Darren's prognosis.

Ok I have changed to order of the scripts and I no longer get a javascript error but it still just shows the coordinates. I then tried copying the code from Darren's website again and I get and error with the script saying that Uncaught SyntaxError: Unexpected end of input

Am I right in thinking that I need another } at the end of the code shown on Darren's website like I put in my example above? If I do put an extra } at the end then I gets rid of all my javascript errors but I still just get the coordinates shown. Any ideas? cheers

I've altered Darren's JS a little, most notably I initialize the "fm" variable, try this:

$(document).ready(function () {
    $('div[class=map_canvas]').each(function () {
        var fm = {};
        fm.maps = new Array();

        $(this).addClass('mapdimensions');
        var mapId = $(this).attr('id');

        var value = $(this).html();
        value = $.trim(value);

        var points = value.split(',');

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

        fm.maps[fm.maps.length] = new GMap2(document.getElementById(mapId));
        var map = fm.maps[fm.maps.length - 1];

        var point = new GLatLng(lat, lon);
        map.setCenter(point, zoom);
        map.enableScrollWheelZoom();
        map.addControl(new GSmallZoomControl())
        map.setMapType(G_NORMAL_MAP);

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

oh, I changed the class name from "map" to "map_marker", so that should look like this for you:

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

Excellent, that is now displaying the map but I get a javascript error saying "p is not defined" and it does not display the marker.

My fault! :-) Change the marker line to this:

var marker = new GMarker(point);

Excellent, many thanks, that is now working perfectly. One more question that you may or may not know the answer to. Is there anything I can do about the text that reads "Map data 2009 tele............" because I have it in div that is 200px wide and it overhangs

Hmmm, I don't think I did anything specific for that, but I already had the CSS file from the current website, I'm rebuilding this website in Umbraco: http://www.dordrechttoer.nl/

Have a look at the styling for that maps block (bottom right), it might help.

Hi Sebastian,

I implemented your script in my template like this:

<asp:content ContentPlaceHolderId="phMain" runat="server">
 <div class="C00_Clean container">
      <div class="sep">
         <umbraco:Macro Alias="Activity" runat="server" />
         <div id="map" class="map">
                 
           <script type="text/javascript">
            $(document).ready(function () {
              $('div[class=map]').each(function () {
              var fm = {};
              fm.maps = new Array();
      
              $(this).addClass('mapdimensions');
              var mapId = $(this).attr('id');
      
              var value = $(this).html();
              value = $.trim(value);
      
              var points = value.split(',');
      
              var lat = parseFloat(points[0]);
              var lon = parseFloat(points[1]);
              var zoom = parseFloat(points[2]);
      
              fm.maps[fm.maps.length] = new GMap2(document.getElementById(mapId));
              var map = fm.maps[fm.maps.length - 1];
      
              var point = new GLatLng(lat, lon);
              map.setCenter(point, zoom);
              map.enableScrollWheelZoom();
              map.addControl(new GSmallZoomControl())
              map.setMapType(G_NORMAL_MAP);
      
              var marker = new GMarker(point);
              map.addOverlay(marker)
              });
            });
            </script>
             <umbraco:Item field="activityGoogleMap" runat="server" />  
         </div>    
    </div>    
  </div>
  
</asp:content>

But for some reason, the Google Map isn't rendering in the page, the only thing that is rendered, is the coördinates of the Google Map property:

Am I missing something here?

thanks for your help,

Anthony

is working on a reply...