Comment associer des marqueurs Google Maps à d'autres éléments?

Question

En utilisant le google maps (et JavaScript) j'ai été capable d'afficher facilement plusieurs marqueurs qui ont chacun une belle petite fenêtre d'information sur eux.

//Create map over USA 
map = new google.maps.Map2(document.getElementById('map')); 
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3); 

//Create point, then marker, and then add to map 
function create_marker(lat, lng, html) { 
    var marker = new GMarker(new GLatLng(lat,lng)); 
    marker.bindInfoWindow(html); 
    map.addOverlay(marker); 
} 

var html = '<div>this is my text</div>'; 
create_marker(38.95940879245423, -100.283203125, html); 

Cependant, je veux maintenant être en mesure de lier le « clic » des marqueurs à des fonctions qui peuvent mettre à jour d'autres parties de la page ainsi. Par exemple, j'aimerais avoir une barre latérale avec des copies du contenu de l'infowindow du marqueur. De la même manière google maps shows results à gauche et les marqueurs à droite. Je pourrais même vouloir que le clic du contenu de la barre latérale ouvre un infowindow de marqueur donné sur la carte.

Le problème est que l'événement de clic GMarker ne passe que lat/long - et je ne suis pas sûr de savoir comment l'utiliser pour trouver la div correspondante ou autre.

Comment puis-je obtenir un ID/handle unique pour chaque marqueur?

Answer 1

Affectez un ID à chaque marqueur et son élément correspondant dans la barre latérale. Créez un écouteur d'événement pour appeler cet ID. Quelque chose comme ceci:

var html = '<div>this is my text</div>'; 
var sideHtml = '<div id="1">this is my text</div>'; 
create_marker(38.95940879245423, -100.283203125, html, 1); 
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery) 

//Create point, then marker, and then add to map 
function create_marker(lat, lng, html, id) { 
    var marker = new GMarker(new GLatLng(lat,lng)); 
    marker.bindInfoWindow(html); 
    map.addOverlay(marker); 

    GEvent.addListener(marker, 'click', function(latlng) { 
     var div = document.getElementById(id); //access the sidebar element 
     // etc... 
    }); 
} 

Voir aussi this question.

Answer 2

Pour ceux qui sont intéressés il y a un grand exemple de l inking dom elements with markers donné ici. Fondamentalement, vous venez de créer un tableau JS global qui contient une référence à chaque objet marqueur.