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?

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>

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

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

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

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>

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.

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

Achten Sie auch darauf, nicht zu schreiben

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

richtig:

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

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.

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.

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.

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

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

[...]

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() & """...

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.

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

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

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

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>

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

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.

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.

Mein Fehler war zu verwenden

zoomLevel

als Option und nicht als richtige Option

zoom

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

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

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.