Sign in Register
Go to solution
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 15836 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 15836 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
Please Sign in or register to post replies

Write your reply to:

Draft