Google MAP API Uncaught TypeError: Die Eigenschaft 'offsetWidth' von null kann nicht gelesen werden
Ich versuche, Google MAP API v3 mit dem folgenden code.
<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>
Wenn ich diesen code ausführen, der browser sagt.
Uncaught TypeError: Cannot read property 'offsetWidth' null
Habe ich keine Ahnung, da ich die die Richtung gegeben, in dieses tutorial.
Haben Sie keine Ahnung?
Kommentar zu dem Problem - Öffnen
Es gibt nichts in deinem code, die verwendet
offsetWidth
. Ist das wirklich der komplette code? Vermutlich ist der {% ... %}
ist, einige server-seitigen code? Was ist in der browser Quelle Anzeigen? Ich Wünsche gmaps hatte eine bessere Fehlermeldung.
InformationsquelleAutor der Frage jaeyong | 2012-07-31
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dieses problem ist in der Regel durch die map-div-Element nicht gerendert wird, bevor das javascript ausgeführt wird, das Zugriff benötigt.
Sollten Sie Ihren code für die Initialisierung innerhalb einer Funktion onload oder am Ende der HTML-Datei, kurz vor dem tag, also der DOM ist vollständig dargestellt, bevor es ausgeführt wird (beachten Sie, dass die zweite option ist mehr empfindlich auf ungültiges HTML).
Hinweis, wie bereits von matthewsheets dies könnte auch die Ursache von der div mit der entsprechenden id nicht existiert, überhaupt in Ihre HTML (der pathologische Fall des div nicht gerendert wird)
Hinzufügen von code-Beispiel aus wf9a5m75's post um alles an einem Ort:
InformationsquelleAutor der Antwort geocodezip
Für andere, die vielleicht noch mit diesem Problem, auch nach dem Versuch, die oben genannten Empfehlungen, mit einer falschen Auswahl für Ihre Karte Leinwand in der initialize-Funktion können verursachen das gleiche Problem wie die Funktion zuzugreifen versucht, dass etwas nicht existiert. Überprüfen Sie, dass Ihre map-Id übereinstimmt, die in Ihrer initialize-Funktion und Ihre HTML-oder der gleiche Fehler geworfen werden darf.
In anderen Worten, stellen Sie sicher, dass Ihre IDs übereinstimmen. 😉
InformationsquelleAutor der Antwort matthewsheets
google verwendet
id="map_canvas"
undid="map-canvas"
in den Proben, double-check und re-überprüfen der id 😀InformationsquelleAutor der Antwort dpineda
Jahr, geocodezip die Antwort richtig ist.
So ändern Sie Ihren code wie folgt:
(wenn Sie noch in Schwierigkeiten, oder vielleicht jemand anderes in der Zukunft)
InformationsquelleAutor der Antwort wf9a5m75
Sie können auch diese Fehlermeldung angezeigt, wenn Sie nicht angeben
center
oderzoom
in Ihre anzeigen-Optionen.InformationsquelleAutor der Antwort JamesFrost
Nur, damit ich mein scheitern Szenario ausmalt, um zu arbeiten. Ich hatte eine
<div id="map>
in denen ich war, laden Sie die Karte mit:und das div war zunächst versteckt und es nicht explizit Werte für Höhe und Breite festlegen, so dass es die Größe war
width x 0
. Einmal habe ich legen Sie die Größe des div in CSS wie diesesalles geklappt! Hoffe, das jemand hilft.
InformationsquelleAutor der Antwort Nikola
Für noch mehr andere, die vielleicht noch mit diesem Problem, ich war mit einer selbstschließenden
<div id="map1" />
tag, und das zweite div-Element wurde nicht angezeigt, und nicht zu sein scheinen in der dom. sobald ich es geändert zwei öffnen und schließen-tags<div id="map1"></div>
es funktionierte. hthInformationsquelleAutor der Antwort changokun
Hatte ich einzelne Zitate in meinem
und ersetzt Sie mit doppelten Anführungszeichen
Diese hat den trick für mich.
InformationsquelleAutor der Antwort VB.Net Programmer
Ändern der ID (in allen 3 Orten) von "map-canvas" auf "anzeigen" fixiert es für mich, obwohl ich hatte sicher gestellt, dass die IDs die gleichen waren, die div hatte eine Breite und Höhe ein, und den code nicht in Betrieb war, bis nach dem laden-Fenster aufrufen. Es ist nicht der Strich, es scheint nicht zu funktionieren mit andere ID als "Karte".
InformationsquelleAutor der Antwort Johnny5k
Auch darauf achten, nicht zu schreiben
richtig:
InformationsquelleAutor der Antwort Mike
Stellen Sie außerdem sicher, dass Sie nicht platzieren hash-symbol (#) in Ihren Selektor in einem
Anweisung. Es ist kein jQuery. Nur eine kurze Erinnerung für jemanden in Eile.
InformationsquelleAutor der Antwort Alex Kungfu
Ich hatte das gleiche Problem, aber das problem war, dass der zoom wurde nicht definiert, in das options-Objekt gegeben von Google Maps.
InformationsquelleAutor der Antwort torresomar
Wenn Sie mehrere Karten in einer Schleife, wenn Sie eine einzelne Karte DOM-element nicht vorhanden ist, bricht Sie alle von Ihnen. Erstens, stellen Sie sicher, dass das DOM-element besteht, vor dem erstellen einer neuen Map-Objekt.
InformationsquelleAutor der Antwort Zack Katz
Wenn Sie geschehen, werden mit asp.net Webforms und registrieren Sie das Skript in der code-behind einer Seite, die mit einem master-Seite, vergessen Sie nicht, verwenden Sie die clientID des map-element (vb.net):
InformationsquelleAutor der Antwort Winks
Um es zu lösen benötigen Sie
async defer
an das Skript.Es sollte wie folgt sein:
Sehen hier die Bedeutung von " async defer.
Da Sie den Aufruf einer Funktion aus der Haupt-js-Datei, die Sie wollen auch sicherstellen, dass dies nach der ein, wo Sie laden das Haupt-Skript.
InformationsquelleAutor der Antwort Avi Levin
Und in der Steuerung
$Umfang.init = function() {...}
anstelle von google.maps.event.addDomListener(window, "load", init){...}
Hoffe, dies wird Ihnen helfen.
InformationsquelleAutor der Antwort Akash Saxena
Eigentlich einfachste Weg, dies zu beheben ist, nur bewegen Sie Ihr Objekt, bevor der Javascript-code es funktionierte für mich. Ich denke deine Antwort-Objekt wird geladen, nachdem der javascript-code.
InformationsquelleAutor der Antwort Laltzi
In meinem Fall, diese Art von Fragen wurden gelöst mit
defer
https://developer.mozilla.org/en/docs/Web/HTML/Element/script<script src="<your file>.js" defer></script>
Müssen Sie berücksichtigen, Browser unterstützt diese option, wenn (ich habe nicht gesehen, Probleme)
InformationsquelleAutor der Antwort Yeke
Stellen Sie sicher, dass Sie die Orte, die Bibliothek
&libraries=places
parameter beim ersten laden der API.Beispiel:
InformationsquelleAutor der Antwort Steve
Ich weiß, ich bin ein bisschen spät zu der party, wollte nur hinzufügen, dass der Fehler kann auch passieren, wenn das div existiert nicht in der Seite. Sie können auch prüfen, ob das div existiert zuerst vor dem laden des google maps-Funktion aufrufen. So etwas wie
InformationsquelleAutor der Antwort mr_j
Überprüfen Sie, ob Sie nicht überschreiben
window.self
Mein Problem: ich hatte ein Bauelement geschaffen und schrieb
self = this
statt varself = this
. Wenn Sie nicht verwenden Sie das keyword -var
, JS setzen Sie die variable auf das window-Objekt, also ich überschriebwindow.self
die diesen Fehler verursacht hat.InformationsquelleAutor der Antwort Mike R Emo
Dies ist ein Bearbeiten einer zuvor gelöschten post enthalten den Inhalt der verlinkten Antwort, in der Antwort selbst. Der Zweck für die erneute Veröffentlichung dieser Antwort ist die Funktion als PSA Reagieren 0.9+ - Benutzer haben auch gestolpert in dieser Ausgabe.
ursprünglichen post bearbeitet
Habe auch diesen Fehler bei der Verwendung von ReactJS während der folgenden in diesem blog-post. sahat Kommentar hier geholfen -
die Inhalte der sahat Kommentar unten.
InformationsquelleAutor der Antwort Meredith
Mein fail war
als option, sondern als die richtige option
InformationsquelleAutor der Antwort strattonn
Hier war das problem der API-link, ohne die
key
param:So gut funktioniert.
InformationsquelleAutor der Antwort vaati