Comment cibler une carte générée par la carte JQuery-UI lors de l'utilisation infobox

Question

J'utilise jQuery-ui-map àCréez une instance Google Maps comme ceci:

$('#CHMap').gmap({
  mapTypeControl : false
}).bind('init', function(evt, map) {
  log("Map initilised");
});

alors ailleurs dans le script, j'utilise Infobox Pour ajouter des boîtes d'informations de style complets remplies de données retirées à partir d'un service de géolocalisation comme:

var boxText = document.createElement("div");
var ib = new InfoBox(myOptions); //myOptions can be ignored for this example

$.each(data, function(name, value) {
  $('#CHMap').gmap('addMarker', {
    id:value['YourId'],
    'position': value['Latitude']+','+value['Longitude'],
    'bounds': true,
    'icon': '/img/gicon.png'
  }).click(function() {
    boxText.innerHTML = "hello";
    ib.setContent(boxText);
    ib.open(map, this);
  });
});

'DATA' est un objet renvoyé du service de géolocalisation.Si je place le code "addmarker" ci-dessus à l'intérieur de la fonction «init» liée lorsque le GMAP est créé pour la première fois, l'infobox affiche bien.Lorsque j'utilise le code "addmarker" ailleurs, je reçois "non capturant référenceError: la carte n'est pas définie" Erreur dans la console.

Comment puis-je référencer la "carte" correctement?On dirait que je ne peux pas faire de var map = $('#CHMap').gmap({//options}); comme les documents «JQuery-Ui-Map» suggèrent que GMAP ne renvoie rien.

Answer 1

Je pense que vous pouvez faire

var map = $('#CHMap').gmap();

note de OP.La bonne voie dans le dernier plugin est:

var map = $('#CHMap').gmap('get', 'map');

Je ne vois pas où il dit qu'il ne renvoie rien dans l'API

Lorsque vous devez exécuter l'accès à la carte, vous pouvez ajouter le code à l'intérieur d'un écouteur d'événement Google Maps qui attend jusqu'à ce que les tuiles de carte soient chargées comme ceci.

Alors que GMAPS est extraite ASYNC de Google, vous ne pouvez toujours pas être sûr que ce sera là lorsque vous l'appelez à moins que vous fassiez quelque chose comme ça.

google.maps.event.addListener(YOUR_GOOGLE_MAPS_INSTACE, 'tilesloaded', function() {
       // put your initialization code in here.
}

Il ne sera donc exécuté qu'après que les cartes sont complètement chargées.

Bravo du Brésil!