Difficulties working with google maps in version 3

Navigation
1

I'm transferring my applications to version 3 of this API, but I'm really getting a lot of it.

It turns out that although everything seems to be in place, following the example of google , I get 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><linkhref="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><!---Googlemapsapiv.3--><scriptsrc="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 placed in CodePen for conference (you need to open the console to see the errors !)

To be specific, the error is in the google.maps.Map line it does not seem to be able to get the "map and its ID" ...

What can it be?

Thank you!

    
asked by anonymous 03.07.2017 / 10:42

1 answer

1

I found the problem,

It turns out that "GBrowserIsCompatible" was simply discontinued.

So in the above example, even covering the two versions, it is necessary to call the new way of "GBrowserIsCompatible".

    
01.08.2017 / 10:14
if on the screen before the query is performed Jquery autocomplete for city search, does not distinguish data from cities with the same name