1

Estou transferindo minhas aplicações para a versão 3 dessa API, mas estou realmente apanhando muito.

Acontece que, embora tudo pareca estar no lugar, conforme o exemplo do próprio google , fica me retornando dois erros:

Uncaught TypeError: Cannot read property 'firstChild' of null 

e

Uncaught ReferenceError: GBrowserIsCompatible is not defined 

Eis meu codigo:

<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>x</font>' + ne.lng() + '<br>' +
        sw.lat() +'<font color=red>x</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>

Tambem coloquei no CodePen para conferencia (eh preciso abrir o console para ver os erros!)

Para ser mais especifica, o erro esta na linha "google.maps.Map" ele parece nao estar conseguindo pegar o "mapa e seu ID"...

O que pode ser ?

Obrigada!

1
  • Você está inicializando o mapa duas vezes. No $(document).ready(function(){ vc chama a função initialize que inicia o mapa com o id "map", esse id não existe. Ao carregar o Js vc está chamando a função "initMap", essa usa o id "map_canvas", esse existe. Basta alterar o id "map" para "map_canvas" que corrige o erro, só precisa ver se vc vai inicializar o mapa duas vezes como está fazendo mesmo. Commented 4/07/2017 às 15:24

1 Resposta 1

1

Achei o problema,

Acontece que "GBrowserIsCompatible" simplesmente foi descontinuado.

Então no exemplo acima, mesmo abrangendo as duas versões, eh preciso chamar a nova maneira de "GBrowserIsCompatible".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .