Difficulties working with google maps in version 3

Asked

Viewed 55 times

1

I’m transferring my apps to version 3 of this API, but I’m really picking up a lot.

It turns out, although everything seems to be in place, as the example of google itself , keeps returning me two errors:

Uncaught TypeError: Cannot read property 'firstChild' of null

and

Uncaught ReferenceError: GBrowserIsCompatible is not defined

Here is my code:

<html>
  <head>       
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <link   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>    

    <!--
      -  Google maps api v.3
      -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLk1GHCv9vQwx6N1TY19fFMrASoVh-vJk&libraries=drawing&callback=initMap"  type="text/javascript" async defer></script>
  </head>

  <body>
    <div id="map_canvas" style=" border: 2px solid #3872ac; height: 300px; width:  300px;">
    </div>
    <div id="info">
    </div>
    <div id="info2">
    </div>  

  </body>
</html>

<script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: {
          lat: 35.362152270911,
          lng: 132.75379295934
        },
        zoom: 13
      });

      var drawingManager2 = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          // drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
          drawingModes: ['rectangle']
        }
      });

      drawingManager2.setMap(map)
      google.maps.event.addListener(drawingManager2, 'polygoncomplete', function(polygon) {
        document.getElementById('info').innerHTML += "polygon points:" + "<br>";
        for (var i = 0; i < polygon.getPath().getLength(); i++) {
          document.getElementById('info').innerHTML += polygon.getPath().getAt(i).toUrlValue(6) + "<br>";
        }
        <!-- polygonArray.push(polygon); -->
      });

      google.maps.event.addListener(drawingManager2, 'rectanglecomplete', function(rectangle) {
        var ne = rectangle.getBounds().getNorthEast();
        var sw = rectangle.getBounds().getSouthWest(); 

        document.getElementById('info').innerHTML +=
        ne.lat() +'<font color=red>ｘ</font>' + ne.lng() + '<br>' +
        sw.lat() +'<font color=red>ｘ</font>' + sw.lng();
      });
    }

    function initialize() {
      /** google maps Version 3 functions*/
       var map = new google.maps.Map(
         document.getElementById('map_canvas'), {
           center: new google.maps.LatLng(35.565486108000073, 133.04002472100001),
           zoom: 13,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       });

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


    }

  $(document).ready(function(){
      initialize();
  });


</script>

Also I put in Codepen conference room (I need to open the console to see the errors!)

To be more specific, the error is in the line "google.maps.Map" he doesn’t seem to be getting the "map and your ID"...

What can it be ?

Thank you!

google-maps

  • You are initiating the map twice. No $(Document). ready(Function(){ vc calls the initialize function that starts the map with the id "map", this id does not exist. When loading Js vc is calling the function "initMap", this uses the id "map_canvas", this one exists. Just change the id "map" to "map_canvas" that fixes the error, just need to see if vc will initialize the map twice as it is doing same.

1 answer

1


I found the problem,

It turns out that "Gbrowseriscompatible" was simply discontinued.

So in the example above, even covering both versions, I need to call the new way "Gbrowseriscompatible".

Browser other questions tagged google-maps

You are not signed in. Login or sign up in order to post.