0

Estou tendo um problema com uma aplicação que simplesmente mostra o mapa do google maps, o mapa aparece na tela corretamente, porém, quando eu tento colocar um marcador, ele da o seguinte erro:

TypeError: Cannot read property 'offsetWidth' of null

CÓDIGO:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>


     <script src="https://maps.googleapis.com/maps/api/js?key=ADUjdEY"  type="text/javascript"></script>


     <style type="text/css" >
      #map_canvas {
              width:100%;
            height:100%;
     }
    </style>

    <script type="text/javascript">



    function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 10,
        center: ponto,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
    }
       var map = new google.maps.Map(document.getElementById("map_canvas"));
       var ponto = new google.maps.LatLng(-34.397, 150.644);
      var marker = new google.maps.Marker({
      position: ponto,//seta posição
      map: map,//Objeto mapa
      title:"Hello World!"//string que será exibida quando passar o mouse no marker
      //icon: caminho_da_imagem
             });

       google.maps.event.addDomListener(window, "load", initialize);
       </script>


       </head>
       <body >
        <div id="map_canvas"></div>
      </body>
     </html>    

1 Resposta 1

0

Você precisa carregar a DIV "map_canvas" antes de chamar o script.

Segue o código correto. Não esqueça de alterar XXXX pela sua chave da API do Google maps.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>


   


       </head>
       <body >
        <div id="map_canvas"></div>


  <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX"  type="text/javascript"></script>


     <style type="text/css" >
      #map_canvas {
              width:100%;
            height:100%;
     }
    </style>

    <script type="text/javascript">



    function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 10,
        center: ponto,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
    }
       var map = new google.maps.Map(document.getElementById("map_canvas"));
       var ponto = new google.maps.LatLng(-34.397, 150.644);
      var marker = new google.maps.Marker({
      position: ponto,//seta posição
      map: map,//Objeto mapa
      title:"Hello World!"//string que será exibida quando passar o mouse no marker
      //icon: caminho_da_imagem
             });

       google.maps.event.addDomListener(window, "load", initialize);
       </script>



      </body>
     </html>    

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 .