Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Anthony Candaele 1197 posts 2049 karma points
    May 21, 2012 @ 11:35
    Anthony Candaele
    0

    Google Map not rendering in page

    Hi,

    I installed the Google Maps Datatype package and add the Google Map Datatype to one of my documenttype properties. Adding a Google Map location in the Umbraco Backoffice works perfect, but I can't seem to render it in the page.

    My template looks 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">
                <umbraco:Item field="activityGoogleMap" runat="server" />
               <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>
             </div>    
        </div>    
      </div>
      
    </asp:content>

    In my master template I have referenced the Google Map API:

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    I have noticed, that when I delete the Javascript in my template, the coördinates of the Google Map show up:

    Am I missing something here?

    Thanks for your help,

    Anthony

    Copy Link
  • Lee Kelleher 4026 posts 15837 karma points MVP 13x admin c-trib
    May 21, 2012 @ 15:22
    Lee Kelleher
    0

    Hi Anthony,

    Try moving your <script> tag outside of the <div class="map"> tag, as it think it may be causing an issue.  Then in the JS, try changing the "var value = $(this).html();" to "var value = $(this).text();" ... so that you are only getting the text value, not the innerHTML.

    Cheers, Lee.

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

    Hi Lee,

    Thanks for your help,

    I placed the script tag outside of the <div id="map"></div> like this

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB5ay3d80mbDBSwZlSojmNGzs1N2mG-qek&sensor=true"></script>
      <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).text();
      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>

    sorry for the bad layout, can't seem to edit it in this post.

    But the Google Map still doesn't render in the page.
    Copy Link
  • Lee Kelleher 4026 posts 15837 karma points MVP 13x admin c-trib
    May 21, 2012 @ 15:59
    Lee Kelleher
    0

    Do you get any JS errors in your browser?

    Copy Link
  • Anthony Candaele 1197 posts 2049 karma points
    May 21, 2012 @ 16:07
    Anthony Candaele
    0

    No, the only thing that is rendered in the browser is:

    <div id="map" class="map">
      51.0509868,3.723984400000063,13
      </div>
    Copy Link
  • Anthony Candaele 1197 posts 2049 karma points
    May 21, 2012 @ 16:34
    Anthony Candaele
    0

    I have tried the static Google map with the script of Darren's Blogpost:

    <script type="text/javascript">
         $(document).ready(function () {
                $('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 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);
        });
      });
      </script>

    And this works!:

    strange why the dynamic script isn't working.

    Anthony

    Copy Link
  • Anthony Candaele 1197 posts 2049 karma points
    May 23, 2012 @ 13:40
    Anthony Candaele
    0

    yay, I got the dynamic map working :)

    I used Codex' modified JavaScript (see comments in Darren Ferguson's blogpost on displaying Google Maps using the Google Maps Datatype:

    $('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);

    });

    Thanks to Lee Kelleher for his help

    Anthony

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies