Ich versuche, Google MAP API v3 mit dem folgenden Code zu verwenden.
<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ühre, sagt der Browser dies.
Nicht erfasster TypeError: Die Eigenschaft 'offsetWidth' von null kann nicht gelesen werden
Ich habe keine Ahnung, da ich den Anweisungen in diesem Tutorial folge .
Hast du eine Ahnung?
quelle
Bei anderen Personen, bei denen dieses Problem möglicherweise weiterhin auftritt, kann die Verwendung eines falschen Selektors für Ihren Kartenbereich in der Initialisierungsfunktion das gleiche Problem verursachen, wenn die Funktion versucht, auf etwas zuzugreifen, das nicht vorhanden ist. Stellen Sie sicher, dass Ihre Karten-ID in Ihrer Initialisierungsfunktion übereinstimmt und Ihr HTML-Code oder derselbe Fehler möglicherweise ausgelöst wird.
Mit anderen Worten, stellen Sie sicher, dass Ihre IDs übereinstimmen. ;)
quelle
Sie können diesen Fehler auch erhalten, wenn Sie keine
center
oderzoom
in Ihren Kartenoptionen angeben .quelle
Google verwendet
id="map_canvas"
undid="map-canvas"
in den Beispielen überprüfen und überprüfen Sie die ID erneut: D.quelle
Jahr, die Antwort von Geocodezip ist richtig. Ändern Sie Ihren Code also folgendermaßen: (wenn Sie immer noch in Schwierigkeiten sind oder in Zukunft jemand anderes)
quelle
Nur damit ich mein Fehlerszenario hinzufüge, damit dies funktioniert. Ich hatte eine,
<div id="map>
in die ich die Karte geladen habe mit:und das div war anfangs ausgeblendet und es wurden keine expliziten Werte für Breite und Höhe festgelegt, so dass es Größe war
width x 0
. Sobald ich die Größe dieses Div in CSS so eingestellt habealles hat funktioniert! Hoffe das hilft jemandem.
quelle
Für noch mehr andere, die dieses Problem möglicherweise noch haben, habe ich ein selbstschließendes
<div id="map1" />
Tag verwendet, und der zweite Div wurde nicht angezeigt und schien nicht im Dom zu sein. Sobald ich es in zwei Open & Close-Tags geändert habe, hat<div id="map1"></div>
es funktioniert. hthquelle
Achten Sie auch darauf, nicht zu schreiben
richtig:
quelle
Ich hatte einfache Anführungszeichen in meinem
und ersetzte sie durch doppelte Anführungszeichen
Das hat den Trick für mich getan.
quelle
Das Ändern der ID (an allen drei Stellen) von "Map-Canvas" in "Map" hat dies für mich behoben, obwohl ich sichergestellt hatte, dass die IDs identisch waren, das Div eine Breite und Höhe hatte und der Code nicht läuft bis nach dem Fensterladeaufruf. Es ist nicht der Strich; Es scheint mit keiner anderen ID als "Karte" zu funktionieren.
quelle
Stellen Sie außerdem sicher, dass Sie kein Hash-Symbol (#) in Ihrem Selektor in a platzieren
Aussage. Es ist keine jQuery. Nur eine kurze Erinnerung für jemanden, der es eilig hat.
quelle
Ich hatte das gleiche Problem, aber das Problem war, dass der Zoom nicht innerhalb des Optionsobjekts definiert wurde, das Google Maps zugewiesen wurde.
quelle
Wenn Sie mehrere Karten in einer Schleife erstellen und kein einzelnes Karten-DOM-Element vorhanden ist, werden alle Karten unterbrochen. Überprüfen Sie zunächst, ob das DOM-Element vorhanden ist, bevor Sie ein neues Map-Objekt erstellen.
quelle
Wenn Sie zufällig asp.net-Webformulare verwenden und das Skript mithilfe einer Masterseite im Code hinter einer Seite registrieren, vergessen Sie nicht, die clientID des Kartenelements (vb.net) zu verwenden:
quelle
Um es zu lösen, müssen Sie
async defer
dem Skript hinzufügen .Es sollte so sein:
Sehen Sie hier die Bedeutung von Async Defer.
Da Sie eine Funktion aus der Haupt-js-Datei aufrufen, möchten Sie auch sicherstellen, dass diese nach der Stelle liegt, an der Sie das Hauptskript laden.
quelle
Stellen Sie sicher, dass Sie den
&libraries=places
Parameter der Ortsbibliothek einschließen, wenn Sie die API zum ersten Mal laden.Beispielsweise:
quelle
Ich weiß, dass ich etwas spät zur Party komme, wollte nur hinzufügen, dass der Fehler auch auftreten kann, wenn das div nicht auf der Seite vorhanden ist. Sie können auch überprüfen, ob das div zuerst vorhanden ist, bevor Sie den Funktionsaufruf von Google Maps laden. Etwas wie
quelle
Und in der Steuerung
Verwenden Sie $ scope.init = function () {...} anstelle von google.maps.event.addDomListener (Fenster, "Laden", Init) {...}
Hoffe das wird dir helfen.
quelle
Der einfachste Weg, dies zu beheben, besteht darin, Ihr Objekt vor dem Javascript-Code zu verschieben, der für mich funktioniert hat. Ich denke, in Ihrer Antwort wird das Objekt nach dem Javascript-Code geladen.
quelle
In meinem Fall wurden diese Probleme mithilfe von https://developer.mozilla.org/en/docs/Web/HTML/Element/script gelöst
defer
<script src="<your file>.js" defer></script>
Sie müssen jedoch die Unterstützung der Browser für diese Option berücksichtigen (ich habe keine Probleme gesehen).
quelle
Stellen Sie sicher, dass Sie nicht überschreiben
window.self
Mein Problem: Ich hatte eine Komponente erstellt und
self = this
anstelle von var geschriebenself = this
. Wenn Sie das Schlüsselwort nicht verwendenvar
, fügt JS diese Variable in das Fensterobjekt ein, sodass ich überschrieb,window.self
was diesen Fehler verursacht hat.quelle
Dies ist eine Bearbeitung eines zuvor gelöschten Beitrags, um den Inhalt der verknüpften Antwort in der Antwort selbst zu enthalten. Der Zweck für die erneute Veröffentlichung dieser Antwort besteht darin, als PSA für Benutzer von React 0.9+ zu fungieren, die ebenfalls auf dieses Problem gestoßen sind.
ursprünglich bearbeiteter Beitrag
Dieser Fehler wurde auch bei der Verwendung von ReactJS beim Verfolgen dieses Blogposts angezeigt . Sahats Kommentar hier hat geholfen - siehe den Inhalt von Sahats Kommentar unten.
quelle
Mein Fehler war zu verwenden
als Option und nicht als richtige Option
quelle
Fügen Sie zu Beginn des Aufrufs der Map-API-Taste eine asynchrone Verzögerung hinzu.
quelle
In einem Fall, mit dem ich es zu tun hatte, wurde das Map-Div bedingt gerendert, je nachdem, ob der Ort veröffentlicht wurde. Wenn Sie nicht sicher sind, ob das Map-Canvas-Div auf der Seite angezeigt wird, überprüfen Sie einfach, ob Sie
document.getElementById
ein Element zurückgeben, und rufen Sie die Map nur auf, wenn sie vorhanden ist:quelle
Hier war das Problem der API-Link ohne den
key
Parameter:Auf diese Weise funktioniert gut.
quelle