web-dev-qa-db-fra.com

TypeError non capturé: impossible de définir la propriété 'position' de undefined

J'ai ce code me donnant l'étrange message d'erreur

Uncaught TypeError: Cannot set property 'position' of undefined

C'est l'intérieur d'un plugin jQuery pour afficher une carte google dans une popup. J'utilisais le code ailleurs, où cela fonctionnait bien - la seule différence ici semble être que je l'utilise maintenant dans une fenêtre contextuelle. Suis-je absent d'un problème de portée ou quelque chose? Toutes les variables comme geocoderParams et latlng sont remplies comme elles le devraient. La recherche sur le message d'erreur n'a rien révélé de valable.

Le message d'erreur est déclenché lorsque google.maps.Map () est appelé.

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()
javascriptgoogle-mapsgoogle-maps-api-3coffeescript
37
user627542

J'ai recherché google.maps.Map() et le référence Google dit que le premier paramètre devrait être un mapDiv:Node Qui est le conteneur de la carte et est généralement un div élément.

Vous passez $(this) qui est probablement un objet jQuery qui n'est pas ce à quoi Google maps s'attend. Je ne connais pas le reste de votre code, mais peut-être devriez-vous simplement passer this au lieu de $(this).

66
jfriend00

Si vous utilisez jQuery, vous devez passer le Vanilla HTMLElement (par exemple Node) au lieu de la sélection jQuery (par exemple Array/NodeList) qui la requête $() retourne.

si vous ajoutez une commande de console:

console.log(self);

il renverra quelque chose comme:

[ ▶ <div id="map_canvas"></div> ]

pour obtenir la valeur du tableau jQuery, remplacez:

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

avec:

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

J'ai rencontré cette erreur en essayant de lancer la carte avec quelque chose comme ceci:

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

J'ai pu le résoudre en sélectionnant le premier (et le seul) élément renvoyé par le sélecteur en ajoutant [0] après le sélecteur:

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