Problem with Google maps when placing a point on the map

Asked

Viewed 82 times

0

I’m having a problem with an application that simply shows the map of google maps, the map appears on the screen correctly, however, when I try to place a marker, it gives the following error:

Typeerror: Cannot read Property 'offsetWidth' of null

CODE:

<!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>
javascript google

1 answer

0

You need to load the DIV "map_canvas" before calling the script.

Follow the correct code. Don’t forget to change XXXX by your Google maps API key.

<!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>

Browser other questions tagged javascript google

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