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.

TypeError no capturado: no se puede leer la propiedad 'offsetWidth' de nulo

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

¿Tienes alguna pista?

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

Debe colocar 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 procese completamente antes de ejecutarse (tenga en cuenta que la segunda opción es más sensible a HTML no válido).

Tenga en cuenta que, como se señala en matthewsheets, esto también podría ser causado por el div con esa identificación que no existe en absoluto en su HTML (el caso patológico del div no se representa)

Agregar código de muestra de la publicación 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>

Para otros que todavía pueden tener este problema , incluso después de probar las recomendaciones anteriores, usar un selector incorrecto para el lienzo del mapa en la función de inicialización puede causar el 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 puede ser arrojado.

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

También puede obtener este error si no especifica centero zoomen sus opciones de mapa.

google usa id="map_canvas"y id="map-canvas"en las muestras, verifique y vuelva a verificar la identificación: D

Año, la respuesta de geocodezip es correcta. Así que cambie su código de esta manera: (si todavía tiene 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>

Solo así que agrego mi escenario de falla para 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 valores de ancho y alto explícitamente establecidos, por lo que su tamaño era width x 0. Una vez que he establecido el tamaño de este div en CSS como este

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

todo funcionó! Espero que esto ayude a alguien.

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

También ten cuidado de no escribir

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

correcto:

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

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í.

El cambio de la ID (en los 3 lugares) de "map-canvas" a "map" lo arregló para mí, aunque me había asegurado de que las ID fueran las mismas, el div tenía un ancho y una altura, y el código no era funcionando hasta después de la llamada de carga de la ventana. No es el guión; no parece funcionar con ninguna otra identificación que no sea "mapa".

Además, asegúrese de no colocar el símbolo hash (#) dentro de su selector en un

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

    document.getElementById('map') // good

declaración. No es un jQuery. Solo un recordatorio rápido para alguien que tiene prisa.

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

Si está creando múltiples mapas en un bucle, si no existe un solo elemento DOM de mapa, los rompe a todos. Primero, verifique para asegurarse de que el elemento DOM existe 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);
}

[...]

Si usa formularios web 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 de mapa (vb.net):

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

Para resolverlo, debe agregar async deferal script.

Debería ser así:

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

Vea aquí el significado de aplazamiento asíncrono.

Dado que invocará una función desde el archivo js principal, también debe asegurarse de que sea posterior a la que carga el script principal.

Asegúrese de incluir el &libraries=placesparámetro de la biblioteca de Lugares cuando cargue la API por primera vez.

Por ejemplo:

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

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 el div existe primero antes de cargar la llamada a la función 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
     }
}

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

• Y en el controlador

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

Espero que esto te ayudará.

En realidad, 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 su 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>

En mi caso, este tipo de problemas se resolvieron usando 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)

Comprueba que no estás anulando window.self

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

Esta es una edición de una publicación eliminada previamente 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 recibí este error al usar ReactJS mientras seguía esta publicación de blog . comentario de sahat aquí 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 el ú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.

Mi falla fue usar

zoomLevel

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

zoom

agregue aplazamiento asíncrono al comienzo de la llamada de la clave de API del mapa.

En un caso con el que estaba lidiando, el mapa div se renderizó condicionalmente dependiendo de si la ubicación se hacía pública. Si no puede estar seguro de si el div de lienzo del mapa estará en la página, simplemente verifique que document.getElementByIddevuelva un elemento e invoque el mapa solo si está presente:

var mapEle = document.getElementById("map_canvas");
if (mapEle) {
    map = new google.maps.Map(mapEle, myOptions);
}

Aquí el problema era el enlace API sin el keyparámetro:

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

De esa manera funciona bien.