Problem with Google maps when I put a dot on the map

Question

Problem with Google maps when I put a dot on the map

Navigation

#1 by (0 votes)

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: Can not 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

asked by anonymous 24.05.2016 / 01:16

1 answer

Hide TabLayout title line PHP Array for formatting tree

score 0 · Answer 1

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

Follow the correct code. Do not forget to change XXXX with 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>