Google MAP API Uncaught TypeError : Impossible de lire la propriété 'offsetWidth' de null.

Question

J'essaie d'utiliser l'API Google MAP v3 avec le code suivant.

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

Lorsque j'exécute ce code, le navigateur affiche ceci.

Erreur de Type Non Rattrapée : Impossible de lire la propriété 'offsetWidth' de null.

Je n'en ai aucune idée, puisque je suis la direction donnée dans ce tutoriel .

Avez-vous un indice ?

Answer 1

Ce problème est généralement dû au fait que le div de la carte n'est pas rendu avant l'exécution du javascript qui doit y accéder.

Vous devriez placer votre code d'initialisation à l'intérieur d'une fonction onload ou au bas de votre fichier HTML, juste avant la balise, afin que le DOM soit complètement rendu avant son exécution (notez que la deuxième option est plus sensible au HTML invalide).

Remarque, comme l'a souligné matthewsheets Cela peut aussi être dû au fait que la div avec cet id n'existe pas du tout dans votre HTML (le cas pathologique de la div qui n'est pas rendue).

Ajout de l'échantillon de code de wf9a5m75 pour tout regrouper en un seul endroit :

<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

Pour les autres qui rencontreraient encore ce problème Même après avoir suivi les recommandations ci-dessus, l'utilisation d'un sélecteur incorrect pour le canevas de votre carte dans la fonction d'initialisation peut provoquer le même problème, car la fonction tente d'accéder à quelque chose qui n'existe pas. Vérifiez que l'identifiant de votre carte correspond à celui de votre fonction d'initialisation et de votre HTML, sinon vous risquez d'obtenir la même erreur.

En d'autres termes, assurez-vous que vos identifiants correspondent. ;)

Answer 3

Google utilise id="map_canvas" y id="map-canvas" dans les échantillons, vérifiez et revérifiez l'identité :D

Answer 4

Année, la réponse de geocodezip est correcte. Donc changez votre code comme ceci : (si vous avez encore des problèmes, ou peut-être quelqu'un d'autre dans le futur)

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

Juste pour ajouter mon scénario d'échec pour que cela fonctionne. J'avais un <div id="map> avec lequel je chargeais la carte :

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

et le div était initialement caché et il n'avait pas de valeurs de largeur et de hauteur explicites, donc sa taille était width x 0 . Une fois que j'ai défini la taille de ce div dans le CSS comme ceci

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

tout a fonctionné ! J'espère que cela aidera quelqu'un.