Nicht erfasster Google MAP-API-Typfehler: Die Eigenschaft 'offsetWidth' von null kann nicht gelesen werden

204

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?

jaeyong
quelle

Antworten:

317

Dieses Problem ist normalerweise darauf zurückzuführen, dass das Map-Div nicht gerendert wird, bevor das Javascript ausgeführt wird, das darauf zugreifen muss.

Sie sollten Ihren Initialisierungscode in eine Onload-Funktion oder am Ende Ihrer HTML-Datei direkt vor dem Tag einfügen, damit das DOM vor der Ausführung vollständig gerendert wird (beachten Sie, dass die zweite Option empfindlicher auf ungültiges HTML reagiert).

Beachten Sie, wie in matthewsheets hervorgehoben, dass dies auch durch das div verursacht werden kann, dessen ID in Ihrem HTML-Code überhaupt nicht vorhanden ist (der pathologische Fall, dass das div nicht gerendert wird).

Hinzufügen eines Codebeispiels aus dem Beitrag von wf9a5m75 , um alles an einem Ort zu platzieren:

<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>
Geocodezip
quelle
7
Das passiert mir immer wieder, wenn ich vergesse, mein Kartenskript zu konditionieren. Hinzufügen: var mapExists = document.getElementById ("map-canvas"); if (mapExists) {// script} macht alles besser.
Imperativ
109

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. ;)

matthewsheets
quelle
3
Erstaunlich, wie Sie so sicher sein können, dass dies nicht das Problem ist ... bis Sie überprüfen, ob Sie es früher getestet und vergessen haben, es wieder zu ändern. :-)
Charlie Gorichanaz
28

Sie können diesen Fehler auch erhalten, wenn Sie keine centeroder zoomin Ihren Kartenoptionen angeben .

JamesFrost
quelle
2
Das war der eine! Der Zoom wurde aus den Optionen entfernt, da ich ihn ohnehin später im Skript eingestellt habe, und boomte, die Karte wurde beim ersten Mal geladen, aber beim zweiten Mal wurde dieser Fehler generiert. Danke dir!!
Iain Grant
Ja, das war meins! Hatte einen Zoom, aber keine Mitte. Nur das Hinzufügen der Mitte hat es behoben.
Whelkaholism
1
Sie hätten zumindest eine Nachricht in der Konsole protokollieren können. Vielen Dank!
Martin Shishkov
26

Google verwendet id="map_canvas"und id="map-canvas"in den Beispielen überprüfen und überprüfen Sie die ID erneut: D.

dpineda
quelle
23

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)

<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>
wf9a5m75
quelle
Genau, rendern Sie zuerst das HTML-Div und dann das JS, sonst fügen Sie einen Ereignis-Listener hinzu.
Foxybagga
11

Nur damit ich mein Fehlerszenario hinzufüge, damit dies funktioniert. Ich hatte eine, <div id="map>in die ich die Karte geladen habe mit:

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

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 habe

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

alles hat funktioniert! Hoffe das hilft jemandem.

Nikola
quelle
Dies war genau der Grund, warum es bei mir nicht funktioniert hat. Sie müssen sicherstellen, dass das CSS mit Ihrer Karten-ID übereinstimmt und dass Sie eine anfängliche Kombination aus Breite und Höhe haben, da sonst nichts gerendert wird. Um es noch einmal zusammenzufassen: 1. Stellen Sie sicher, dass Ihre HTML-Div-ID mit der ID-Auswahl übereinstimmt, wenn Sie getElementById in Ihrem JavaScript aufrufen. 2. Stellen Sie sicher, dass das CSS Code zum Stylen Ihrer bestimmten Map enthält, z. B. # map1 {width: 200px; Höhe: 200px; } oder ähnliches, damit es gerendert wird.
Tahir Khalid
7

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

Changokun
quelle
6

Achten Sie auch darauf, nicht zu schreiben

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

richtig:

google.maps.event.addDomListener(window, "load", init)
Mike
quelle
Tatsächlich. Das war auch in meinem Fall ein Problem. Der erste führt die Init-Funktion sofort aus, wenn der zweite gerade die Init-Funktion als Parameter an den Ereignis-Listener übergibt, der die Init-Funktion ausführt, wenn dieses Ereignis auftritt. stackoverflow.com/questions/13286233/…
kivikall
6

Ich hatte einfache Anführungszeichen in meinem

var map = new google.maps.Map( document.getElementById('map_canvas') );

und ersetzte sie durch doppelte Anführungszeichen

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

Das hat den Trick für mich getan.

VB.Net-Programmierer
quelle
5

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.

Johnny5k
quelle
4

Stellen Sie außerdem sicher, dass Sie kein Hash-Symbol (#) in Ihrem Selektor in a platzieren

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

    document.getElementById('map') // good

Aussage. Es ist keine jQuery. Nur eine kurze Erinnerung für jemanden, der es eilig hat.

Keeprock
quelle
3

Ich hatte das gleiche Problem, aber das Problem war, dass der Zoom nicht innerhalb des Optionsobjekts definiert wurde, das Google Maps zugewiesen wurde.

Torresomar
quelle
2

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.

[...]

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);
}

[...]
Zack Katz
quelle
1
Aber alles, was Sie tun müssen, ist zu verhindern, dass die Karte erstellt wird, und das Chaos nicht zu beheben und die Karte zu erstellen.
Ryan The Leach
1

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:

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

Um es zu lösen, müssen Sie async deferdem Skript hinzufügen .

Es sollte so sein:

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

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.

Avi Levin
quelle
1

Stellen Sie sicher, dass Sie den &libraries=placesParameter der Ortsbibliothek einschließen, wenn Sie die API zum ersten Mal laden.

Beispielsweise:

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

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

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
     }
}
mr_j
quelle
1
  • Richten Sie ng-init = init () in Ihrem HTML ein
  • Und in der Steuerung

    Verwenden Sie $ scope.init = function () {...} anstelle von google.maps.event.addDomListener (Fenster, "Laden", Init) {...}

Hoffe das wird dir helfen.

Akash Saxena
quelle
0

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.

<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>
Laltzi
quelle
0

In meinem Fall wurden diese Probleme mithilfe von https://developer.mozilla.org/en/docs/Web/HTML/Element/script gelöstdefer

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

Yercalamarino
quelle
0

Stellen Sie sicher, dass Sie nicht überschreiben window.self

Mein Problem: Ich hatte eine Komponente erstellt und self = thisanstelle von var geschrieben self = this. Wenn Sie das Schlüsselwort nicht verwenden var, fügt JS diese Variable in das Fensterobjekt ein, sodass ich überschrieb, window.selfwas diesen Fehler verursacht hat.

Mike R Emo
quelle
0

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.

❗️ Hinweis zur Reaktion> = 0,9

Vor Version 0.9 wurde der DOM-Knoten als letztes Argument übergeben. Wenn Sie dies verwendet haben, können Sie weiterhin auf den DOM-Knoten zugreifen, indem Sie this.getDOMNode () aufrufen.

Mit anderen Worten, ersetzen Sie den Parameter rootNode durch this.getDOMNode () in der neuesten Version von React.

Meredith
quelle
0

Mein Fehler war zu verwenden

zoomLevel

als Option und nicht als richtige Option

zoom
strattonn
quelle
0

Fügen Sie zu Beginn des Aufrufs der Map-API-Taste eine asynchrone Verzögerung hinzu.

Ghadir Farzaneh
quelle
0

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.getElementByIdein Element zurückgeben, und rufen Sie die Map nur auf, wenn sie vorhanden ist:

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

Hier war das Problem der API-Link ohne den keyParameter:

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

Auf diese Weise funktioniert gut.

vaati
quelle