javascript - purposes - Tipo de error no detectado de la API de Google MAP: no se puede leer la propiedad ''offsetWidth'' de null

google maps javascript api

Question

Estoy tratando de usar Google MAP API v3 con el siguiente código.

<h2>Topology</h2>

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{% url css_media ''tooltip.topology.css'' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media ''tooltip.css'' %}" />

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

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

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

Cuando ejecuto este código, el navegador dice esto.

No se detectó TypeError: No se puede leer la propiedad ''offsetWidth'' de null

No tengo idea, ya que sigo las instrucciones dadas en este tutorial .

¿Tienes alguna pista?

Answer 1

Año, la respuesta de geocodezip es correcta. Así que cambie su código de esta manera: (si todavía está en problemas, o tal vez alguien más en el futuro)

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

Answer 2

Además, asegúrese de que no está colocando el símbolo de hash (#) dentro de su selector en una

    document.getElementById(''#map'') // bad

    document.getElementById(''map'') // good

declaración. No es una jQuery. Sólo un rápido recordatorio para alguien con prisa.

Answer 3

Aquí el problema era el enlace de la API sin el parámetro key :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

De esa manera funciona bien.

Answer 4

Asegúrate de incluir el parámetro Lugares biblioteca &libraries=places cuando cargues la API por primera vez.

Por ejemplo:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

Answer 5

Cambiar la ID (en los 3 lugares) de "map-canvas" a "map" lo solucioné, aunque me había asegurado de que las ID fueran iguales, que el div tuviera un ancho y una altura, y que el código no fuera el mismo. corriendo hasta después de la ventana de llamada de carga. No es el guión; no parece funcionar con ninguna otra ID que no sea "mapa".

Answer 6

Comprueba que no estás anulando a window.self

Mi problema: había creado un componente y escribí self = this lugar de var self = this . Si no usa la palabra clave var , JS pondrá esa variable en el objeto de la ventana, por lo que sobrescribí window.self que causó este error.

Answer 7

De hecho, la forma más fácil de solucionar esto es simplemente mover su objeto antes de que el código Javascript me funcione. Supongo que en tu respuesta el objeto se carga después del código javascript.

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

 <div id="map_canvas"> </div> // Here 

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

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

Answer 8

En mi caso, este tipo de problemas se resolvieron mediante el defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script

<script src="<your file>.js" defer></script>

Sin embargo, debe tener en cuenta la compatibilidad de esta opción con los navegadores (no he visto problemas)

Answer 9

Esta es una edición de una publicación previamente eliminada para contener el contenido de la respuesta vinculada, en la propia respuesta. El propósito de volver a publicar esta respuesta es funcionar como un PSA para los usuarios de React 0.9+ que también se han topado con este problema.

publicación original editada

También obtuve este error al usar ReactJS mientras seguías esta publicación de blog . El comentario de sahat here ayudó - vea el contenido del comentario de sahat a continuación.

❗️ Nota para reaccionar> = 0.9

Antes de v0.9, el nodo DOM se pasaba como último argumento. Si estaba usando esto, aún puede acceder al nodo DOM llamando a this.getDOMNode ().

En otras palabras, reemplace el parámetro rootNode con this.getDOMNode () en la última versión de React.

Answer 10

Este problema generalmente se debe a que el div de mapa no se procesa antes de que se ejecute el javascript que necesita acceder a él.

Debería poner su código de inicialización dentro de una función de carga o en la parte inferior de su archivo HTML, justo antes de la etiqueta, para que el DOM se represente completamente antes de que se ejecute (tenga en cuenta que la segunda opción es más sensible al HTML no válido).

Tenga en cuenta que, como se señaló en matthewsheets esto también podría deberse a que el div con ese id no existe en absoluto en su HTML (el caso patológico del div no se está procesando)

Agregando código de muestra de la wf9a5m75 de wf9a5m75 para poner todo en un solo lugar:

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

Answer 11

Mi fallo fue usar

zoomLevel

como una opción, en lugar de la opción correcta

zoom

Answer 12

Para resolverlo, debe agregar un async defer al script.

Debería ser así:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

Vea here el significado de diferir asíncrono.

Ya que llamará a una función desde el archivo principal js, también quiere asegurarse de que esté detrás del que está cargando el script principal.

Answer 13

Sé que llego un poco tarde a la fiesta, solo quería agregar que el error también puede ocurrir cuando el div no existe en la página. También puede verificar si existe primero el div antes de cargar la función de llamada de google maps. Algo como

function initMap() {
    if($("#venuemap").length != 0) {
        var city= {lat: -26.2041, lng: 28.0473};
        var map = new google.maps.Map(document.getElementById(''venuemap''), {
       etc etc
     }
}

Answer 14

Si está creando varios mapas en un bucle, si no existe un solo elemento DOM del mapa, los rompe todos. Primero, verifique que el elemento DOM exista antes de crear un nuevo objeto Map.

[...]

for( var i = 0; i <= self.multiple_maps; i++ ) {

  var map_element = document.getElementById( ''map'' + ''-'' + i.toString() );

  // Element doesn''t exist, don''t create map!
  if( null === map_element ) {
    continue;
  }

  var map = new google.maps.Map( map_element, myOptions);
}

[...]

Answer 15

Si está utilizando formularios Web de asp.net y está registrando el script en el código detrás de una página usando una página maestra, no olvide usar el ID de cliente del elemento del mapa (vb.net):

ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...

Answer 16

Solo así que agrego mi escenario de falla para hacer que esto funcione. Tenía un <div id="map> en el que estaba cargando el mapa con:

var map = new google.maps.Map(document.getElementById("map"), myOptions);

y el div estaba inicialmente oculto y no tenía establecidos explícitamente los valores de ancho y alto, por lo que su tamaño era width x 0 . Una vez que he configurado el tamaño de esta div en CSS como este

#map {
    width: 500px;
    height: 300px;
}

todo funciono Espero que esto ayude a alguien.

Answer 17

También cuidate de no escribir

google.maps.event.addDomListener(window, "load", init())

correcto:

google.maps.event.addDomListener(window, "load", init)

Answer 18

También puede obtener este error si no especifica el center o el zoom en las opciones del mapa.

Answer 19

Tenía comillas simples en mi

var map = new google.maps.Map( document.getElementById(''map_canvas'') );

y los reemplazó con comillas dobles

var map = new google.maps.Map( document.getElementById("map_canvas") );

Esto hizo el truco para mí.

Answer 20

Tuve el mismo problema, pero el problema era que el zoom no estaba definido dentro del objeto de opciones dado a Google Maps.

Answer 21

google utiliza id="map_canvas" e id="map-canvas" en las muestras, verifique y vuelva a verificar el id: D

Answer 22

Incluso para otras personas que aún podrían tener este problema, estaba usando una etiqueta de cierre automático <div id="map1" /> , y el segundo div no se mostraba, y no parecía estar en el dom. tan pronto como lo cambié a dos etiquetas abiertas y <div id="map1"></div> funcionó. hth

Answer 23

Para otros que aún pueden tener este problema , incluso después de probar las recomendaciones anteriores, usar un selector incorrecto para el lienzo de su mapa en la función de inicialización puede causar este mismo problema, ya que la función está intentando acceder a algo que no existe. Vuelva a verificar que su Id. De mapa coincida con su función de inicialización y su HTML o este mismo error se pueda lanzar.

En otras palabras, asegúrese de que sus identificaciones coincidan. ;)

Answer 24

• Configura ng-init = init () en tu HTML

• Y en el controlador

  use $ scope.init = function () {...} en lugar de google.maps.event.addDomListener (ventana, "cargar", init) {...}

Espero que esto te ayudará.