see only coordinates - Bug Reports

ds 191 posts 223 karma points

Jun 14, 2011 @ 15:48

See only Coordinates?

Bug Reports

I successfuly installed and placed google map into my website but on frontend I see only coordinates not the visual map. I think I must have missed a point :(

37.04168070698826,27.43760706619264,18

Here is the relevant code portion. I am using 4.7.0, Net 4 under www.bodto.com.tr

<html>
<head id="head" runat="server">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>  
  <script type="text/javascript">
    var fm = {};
    fm.maps = new Array();
    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);   
        });
</script>
</head>
<body>
    <div id="footerabout">
        <h4>Hakkmzda</h4>
        <umbraco:Item field="googleMap" runat="server"></umbraco:Item>
    </div> 
</body>
</html>

Copy Link

Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib

Jun 14, 2011 @ 22:06

Hi ds,

The JavaScript code is looking for a tag/class that isn't there! e.g. "div[class=map]"

Wrap the <umbraco:Item ... > for "googleMap" with this:

<div class="map"><umbraco:Item field="googleMap" runat="server"/></div>

Cheers, Lee.

Copy Link

ds 191 posts 223 karma points

Jun 15, 2011 @ 10:34

Hi Lee,

I missed to locate the div but even though I did it, I still see only coordinates.

I can see map on admin backend and create a pin and save it. therefore no problem an admin backend.

Is there still a missing point which I need to follow, Lee?

Copy Link

Marco Fernandes 15 posts 51 karma points

Jun 16, 2011 @ 16:14

Aren't you forgetting to close a bracket? The IF bracket never gets closed...

Copy Link

Rajeev 126 posts 154 karma points

Jun 22, 2011 @ 14:28

Any solutions till? I too face the same problem.

Please let me know.

Copy Link

Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib

Jun 22, 2011 @ 14:42

Hi ds,

Marco is right, the JavaScript is missing a closing bracket to the "if" statement - therefore invalid, so may not run correctly.

Although to be honest, it doesn't need that "if" statement - it's a little overkill for what you need. Try this instead:

<html>
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>  
      <script type="text/javascript">
            var $gmap = $('#gmap');
            var value = $gmap.html();
                value = $.trim(value);
            var point = value.split(',');
            var lat = parseFloat(point[0]);
            var lon = parseFloat(point[1]);
            var zoom = parseFloat(point[2]);
            var m = new GMap2($gmap[0]);
            var p = new GLatLng(lat, lon);
            var marker = new GMarker(p);

            m.setCenter(p, zoom);
            m.addOverlay(marker);   
        });
    </script>
    </head>
    <body>
        <div>
            <h4>Hakkmzda</h4>
            <div id="gmap"><umbraco:Item field="googleMap" runat="server"/></div>
        </div> 
    </body>
</html>

This snippet could be optimised much more... but it should provide the basic functionality to display the map.

Cheers, Lee.

Copy Link

ds 191 posts 223 karma points

Jun 22, 2011 @ 15:59

Hi Lee,

After trying and trying, I made it work like in the following

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=YOURKEY" type="text/javascript"></script> 
  <script type="text/javascript">
      $(document).ready(function () {
          var fm = {};
          fm.maps = new Array();
          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);

              });
          }
      });
</script>
</head>
<body>
        <div class="map" id="map1" >
          <umbraco:Item field="googleMap" runat="server"></umbraco:Item>
        </div>
</body>
</html>

But I would try your suggestion as well, Lee.

Copy Link

Rajeev 126 posts 154 karma points

Jun 23, 2011 @ 01:46

Hi Lee,

GMap2 is not available in Google Maps API V3. That was the error while debugging, I got.

We may require to modify the rendering script accordingly.

It worked for ds in which he used the API v2 which requires API key

-Rajeev

Copy Link

Rajeev 126 posts 154 karma points

Jun 23, 2011 @ 05:50

I have got this working for Google maps API v3 using the following script.

var marker = new google.maps.Marker({ position: latlng, map: map});

</script>

Note: Don't forget to give the div height and width in pixels.

Copy Link

Dominic Brown 91 posts 111 karma points

Jun 29, 2011 @ 15:20

Hi guys,

Really sorry to have to ask this, feel free to laugh at me. But where do i put this code to embed the map?

I'm just trying on a dummy site at present, just the basic business package. I was hoping i could just try adding it to one of the news sections to test it but it didn't work, i tried changing the template to Map but that didn't work.

Apologies for what is a dumb question for you guys. this is only day 2 of me learning Umbraco

thanks for your help, and understanding

Copy Link

Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib

Jun 29, 2011 @ 15:28

Hi Dominic,

You'd add the (JavaScript) code to one of your templates (under Settings > Templates). Not sure which template you should use though, probably use "umbTextpage.master"? But I'd be tempted to create a new one for the Google Map specifically.

Cheers, Lee.

Copy Link

Rajeev 126 posts 154 karma points

Jun 29, 2011 @ 15:29

Step-

Create a datatype of type Google map. (Developer - Data type)

Add the property(this will be the field name) in any of the document types where you want the Map of type the datatype you created.

In the content select the Map Lookp

and Finally in the template where you want to display the map. Insert the umbraco Fileld.

<divclass="map"id="map1">
<umbraco:Itemfield="googleMap"runat="server"></umbraco:Item>
</div>

specify the height and width of th template where you want the map.

Rajeev

Copy Link

Dominic Brown 91 posts 111 karma points

Jun 29, 2011 @ 16:03

I'll have a look at these today, i've managed to get the "Powered by Google" logo up on the site but no map lol

Copy Link

Sarah Akhtar 2 posts 22 karma points

Feb 21, 2012 @ 17:17

Hi All

Great help is provided here, but i have spend my whole day today trying to solve this , but in vain. I thought other java scripts are causing this issue, however, creating a totally new content page, with only map property is also not working. Please help.

I can select the location after searching it , the data type is added, but still its only showing longitude and latitude numbers no image, any help would be greatly appreciated.

Regards

Sarah

Copy Link

karel 2 posts 23 karma points

Feb 29, 2012 @ 11:43

Sarah,

I had the same issue as you. Use the code that "Dominic Brown" provided but!!! There are missing closing tags.

The last line of his snippet should have been:

var marker = new google.maps.Marker({ position: latlng, map: map});

})};})

Copy Link

is working on a reply...

Flag this post as spam?

See only Coordinates?