Ungefangener Typfehler: Kann Eigenschaft 'position' von undefined nicht setzen

Question

Ich habe diesen Code, der mir die seltsame Fehlermeldung gibt

Uncaught TypeError: Kann Eigenschaft 'position' von undefiniert nicht setzen

Das ist der Inhalt eines jQuery-Plugins, um eine Google-Karte in einem Popup anzuzeigen. Ich habe den Code woanders verwendet, wo er gut funktioniert hat - der einzige Unterschied hier scheint zu sein, dass ich ihn jetzt in einem Popup-Fenster benutze. Fehlt mir ein Scope-Problem oder so etwas? Alle Variablen wie geocoderParams und latlng sind richtig belegt. Die Google-Suche nach der Fehlermeldung ergab keinen wertvollen Hinweis.

Die Fehlermeldung wird ausgelöst, wenn google.maps.Map() aufgerufen wird.

self = $(this)
self.hide()

geocoder = new google.maps.Geocoder
geocoderParams =
  address: self.data('address') || settings.address
  region: settings.region

results = geocoder.geocode geocoderParams, (results, status) ->

if status == google.maps.GeocoderStatus.OK
  latlng = results[0].geometry.location

  mapOptions =
    mapTypeControl: false
    overviewMapControl: false
    zoom: settings.zoomLevel
    center: latlng
    mapTypeId: google.maps.MapTypeId.ROADMAP

  map = new google.maps.Map(self, mapOptions)

self.show()

Answer 1

Ich habe google.maps.Map() und der Google-Referenz nachgeschlagen, in der steht, dass der erste Parameter ein mapDiv:Node sein sollte, der den Container für die Karte darstellt und in der Regel ein div-Element ist.

Du übergibst $(this), was wahrscheinlich ein jQuery-Objekt ist, was Google Maps nicht erwartet. Ich kenne den Rest deines Codes nicht, aber vielleicht solltest du einfach this anstelle von $(this) übergeben.

Answer 2

Wenn Sie jQuery verwenden, müssen Sie das vanilla (z. B. Node) anstelle der jQuery-Auswahl (z. B. Array/NodeList) übergeben, die die Abfrage $() zurückgibt.

wenn Sie eine Konsolenbefehl hinzufügen:

console.log(self);

es wird etwas zurückgeben wie:

[   ]

um den Wert aus dem jQuery-Array zu erhalten, ersetzen Sie:

map = new google.maps.Map(self, mapOptions)

durch:

map = new google.maps.Map(self[0], mapOptions)

Answer 3

Ich bin auf diesen Fehler gestoßen, als ich versuchte, die Karte mit etwas Ähnlichem wie diesem zu initialisieren:

map = new google.maps.Map($('#map-canvas'), mapOptions);

Ich konnte das Problem lösen, indem ich das erste (und einzige) Element auswähle, das der Selektor zurückgibt, indem ich [0] nach dem Selektor hinzufüge:

map = new google.maps.Map($('#map-canvas')[0], mapOptions);