TypeError d'API Google MAP non capturée: impossible de lire la propriété 'offsetWidth' de null
J'essaie d'utiliser Google MAP API 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 je lance ce code, le navigateur le dit.
Uncaught TypeError: impossible de lire la propriété 'offsetWidth' de null
Je n'ai aucune idée, puisque je suis la direction donnée dans ce tutoriel .
Avez-vous un indice?
Ce problème est généralement dû au fait que la carte div n'a pas été rendue avant l'exécution du javascript qui doit y accéder.
Vous devez placer votre code d'initialisation dans une fonction onload ou au bas de votre fichier HTML, juste avant la balise, afin que le DOM soit complètement restitué avant son exécution (notez que la deuxième option est plus sensible au code HTML non valide).
Notez que, comme indiqué par matthewsheets , cela peut également être causé par la div avec cet identifiant qui n'existe pas du tout dans votre code HTML (le cas pathologique de la div qui n'est pas rendue)
Ajouter un exemple de code à partir du message de wf9a5m75 pour tout mettre au même 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>
Pour les autres personnes susceptibles de rencontrer ce problème, même après avoir essayé les recommandations ci-dessus, l'utilisation d'un sélecteur incorrect pour votre fond de carte dans la fonction d'initialisation peut entraîner le même problème, car la fonction tente d'accéder à quelque chose qui n'existe pas. Vérifiez à nouveau que votre identifiant de carte correspond à votre fonction d'initialisation et que votre HTML ou cette même erreur peut être renvoyé.
En d'autres termes, assurez-vous que vos identifiants correspondent. ;)
google utilise id="map_canvas" et id="map-canvas" dans les exemples, vérifiez et revérifiez l'id: D
Vous pouvez également obtenir cette erreur si vous ne spécifiez pas center ou zoom dans vos options de carte.
Année, la réponse de geocodezip est correcte. Alors changez votre code comme ceci: (si vous avez encore des problèmes, ou peut-être quelqu'un d'autre à l'avenir)
<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>
Juste pour que j’ajoute mon scénario d’échec pour que cela fonctionne. J'avais un <div id="map> dans lequel je chargeais la carte avec:
var map = new google.maps.Map(document.getElementById("map"), myOptions);
et la div était initialement caché et n'avait pas explicitement défini les valeurs de largeur et de hauteur, sa taille était donc width x 0. Une fois que j'ai défini la taille de cette div en CSS comme ceci
#map {
width: 500px;
height: 300px;
}
tout a fonctionné! J'espère que ça aide quelqu'un.
Pour encore plus de personnes qui pourraient encore avoir ce problème, J'utilisais une balise <div id="map1" /> à fermeture automatique, et la deuxième div ne se montrait pas et ne semblait pas être dans le dom . dès que je l'ai changé en deux balises open & close <div id="map1"></div> cela a fonctionné. hth
J'ai eu des citations simples dans mon
var map = new google.maps.Map( document.getElementById('map_canvas') );
et les a remplacés par des guillemets
var map = new google.maps.Map( document.getElementById("map_canvas") );
Cela a fait le tour pour moi.
Veillez également à ne pas écrire
google.maps.event.addDomListener(window, "load", init())
correct:
google.maps.event.addDomListener(window, "load", init)
Changer l'ID (dans les 3 endroits) de "map-canvas" à "map" l'a corrigé pour moi, même si je m'étais assuré que les ID étaient identiques, la div avait une largeur et une hauteur, et le code n'était pas en cours d'exécution jusqu'après l'appel de chargement de la fenêtre. Ce n'est pas le tiret; il ne semble pas fonctionner avec un autre ID que "map".
Assurez-vous également que vous ne placez pas le symbole dièse (#) dans votre sélecteur dans un
document.getElementById('#map') // bad
document.getElementById('map') // good
déclaration. Ce n'est pas un jQuery. Juste un rappel rapide pour quelqu'un pressé.
J'avais le même problème, mais le problème était que le zoom n'était pas défini dans l'objet Options donné à Google Maps.
Si vous créez plusieurs cartes dans une boucle, si un seul élément DOM de la carte n'existe pas, il les décompose tous. Commencez par vérifier que l'élément DOM existe avant de créer un nouvel objet 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);
}
[...]
- Configurez ng-init = init () dans votre code HTML
Et dans le contrôleur
utilisez $ scope.init = function () {...} au lieu de google.maps.event.addDomListener (window, "load", init) {...}
J'espère que cela vous aidera.
Pour le résoudre, vous devez ajouter async defer au script.
Cela devrait être comme ça:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
Voir ici la signification du différé asynchrone.
Étant donné que vous allez appeler une fonction à partir du fichier js principal, vous voulez également vous assurer que celle-ci se situe après celle où vous avez chargé le script principal.
Si vous utilisez des formulaires Web asp.net et enregistrez le script dans le code d'une page à l'aide d'une page maître, n'oubliez pas d'utiliser le clientID de l'élément de carte (vb.net):
ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...
Je sais que je suis un peu en retard pour la fête, je voulais juste ajouter que l'erreur peut également se produire lorsque la div n'existe pas dans la page. Vous pouvez également vérifier si la div existe avant de charger la fonction google maps. Quelque chose comme
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
}
}
Assurez-vous d'inclure le paramètre Places library &libraries=places lors du premier chargement de l'API.
Par exemple:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
En fait, le moyen le plus simple de résoudre ce problème consiste à déplacer votre objet avant que le code Javascript ne fonctionne pour moi. Je suppose que dans votre réponse, l'objet est chargé après le code 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>
ajoutez différé asynchrone au début de l'appel de la carte api de la carte.
Dans un cas que je traitais, le div de la carte a été rendu conditionnellement selon que l'emplacement a été rendu public. Si vous ne savez pas si le div de la carte sera sur la page, vérifiez simplement que votre document.getElementById renvoie un élément et appelez la carte uniquement si elle est présente:
var mapEle = document.getElementById("map_canvas");
if (mapEle) {
map = new google.maps.Map(mapEle, myOptions);
}
Dans mon cas, ce genre de problèmes a été résolu avec deferhttps://developer.mozilla.org/en/docs/Web/HTML/Element/script
<script src="<your file>.js" defer></script>
Vous devez cependant prendre en compte le support de cette option par les navigateurs (je n'ai pas rencontré de problèmes)
Ceci est une édition d'un message précédemment supprimé pour contenir le contenu de la réponse liée, dans la réponse elle-même. Le but de la republication de cette réponse est de fonctionner en tant que PSA pour React 0.9 utilisateurs ou plus qui sont également tombés dans ce problème.
post original édité
Également eu cette erreur en utilisant ReactJS en suivant cet article de blog . commentaire de sahat ici aidé - voir le contenu du commentaire de sahat ci-dessous.
❗️ Note pour React> = 0.9
Avant la version 0.9, le nœud DOM était le dernier argument transmis. Si vous utilisiez cela, vous pouvez toujours accéder au nœud DOM en appelant this.getDOMNode ().
En d'autres termes, remplacez le paramètre rootNode par this.getDOMNode () dans la dernière version de React.
Vérifiez que vous ne substituez pas window.self
Mon problème: j'avais créé un composant et écrit self = this au lieu de var self = this. Si vous n'utilisez pas le mot clé var, JS mettra cette variable sur l'objet window, aussi j'ai écrasé window.self qui a provoqué cette erreur.
Mon échec a été d'utiliser
zoomLevel
comme une option, plutôt que l'option correcte
zoom