Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • trfletch 595 posts 571 karma points
    Jan 29, 2010 @ 11:02
    trfletch
    0

    Can't get Googlemap to display on page

    Hi,

    I am using Darren Ferguson's Google map datatype but I am only getting the coordinates displayed on the page. I have the following scripts referenced in my master template:

    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAqKXxKQCv8T9beBgr7Qn7mBRZ8s8Y-ry6aFfAhHbHnw1KqI_47hShizyCiWXuth8iL3wk_kw9MuPvKw"></script>
    <script type="text/javascript">
      google.load("maps", "2");
    </script>
    <script src="/Scripts/showgooglemap.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    The showgooglemap.js contains the following code:

    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); 
     });
    }

    I have also added the following on my page:

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

    And the following in my CSS sheet:

    .map {
     width:200px;
     height:200px;
    }

    But I am getting the following javascript error on line 2 of the showgooglemap.js :

    Uncaught ReferenceError: $ is not defined

    Can anyone see where I am going wrong?

  • Dan 1250 posts 3745 karma points admin c-trib
    Jan 29, 2010 @ 11:21
    Dan
    0

    Have you got jQuery installed and referenced in your HTML?

  • ianhoughton 237 posts 485 karma points c-trib
    Jan 29, 2010 @ 11:37
    ianhoughton
    0

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

  • trfletch 595 posts 571 karma points
    Jan 29, 2010 @ 11:57
    trfletch
    0

    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.

  • Darren Ferguson 1022 posts 3258 karma points MVP c-trib
    Jan 29, 2010 @ 12:20
    Darren Ferguson
    0

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

    Let me know if that helps?

     

  • Dan 1250 posts 3745 karma points admin c-trib
    Jan 29, 2010 @ 12:25
    Dan
    0

    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.

  • trfletch 595 posts 571 karma points
    Jan 29, 2010 @ 12:51
    trfletch
    0

    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

  • Sebastiaan Janssen 4880 posts 14554 karma points MVP admin hq
    Jan 29, 2010 @ 13:24
    Sebastiaan Janssen
    0

    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)
        });
    });

     

  • Sebastiaan Janssen 4880 posts 14554 karma points MVP admin hq
    Jan 29, 2010 @ 13:25
    Sebastiaan Janssen
    0

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

    $('div[class=map]').each(function () {
  • trfletch 595 posts 571 karma points
    Jan 29, 2010 @ 13:35
    trfletch
    0

    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.

  • Sebastiaan Janssen 4880 posts 14554 karma points MVP admin hq
    Jan 29, 2010 @ 13:42
    Sebastiaan Janssen
    0

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

    var marker = new GMarker(point);

     

  • trfletch 595 posts 571 karma points
    Jan 29, 2010 @ 14:13
    trfletch
    0

    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

  • Sebastiaan Janssen 4880 posts 14554 karma points MVP admin hq
    Feb 01, 2010 @ 09:40
    Sebastiaan Janssen
    0

    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.

  • Anthony Candaele 1197 posts 2049 karma points
    May 21, 2012 @ 15:32
    Anthony Candaele
    0

    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.lengthnew GMap2(document.getElementById(mapId));
                  var map fm.maps[fm.maps.length 1];
          
                  var point new GLatLng(latlon);
                  map.setCenter(pointzoom);
                  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

Please Sign in or register to post replies

Write your reply to:

Draft