Google Maps: Comment ouvrir une InfoWindow pour un polygone en cliquant dessus?

Question

J'ai une question simple, mais je ne trouve pas la réponse dans la documentation de l'API Google Maps ...

J'ai une carte avec 13 polygones dessinés par l'API. Voici un exemple d'un de ces polygones:

var zone_up_montblanc = new GPolygon([ 
     new GLatLng(46.21270329318585, 6.134903900311617), 
     new GLatLng(46.20538443787925, 6.136844716370282), 
     new GLatLng(46.20525043957647, 6.141375978638086), 
     new GLatLng(46.20698751554006, 6.148050266912262), 
     new GLatLng(46.21110286985207, 6.153203229026629), 
     new GLatLng(46.21730757985668, 6.151718301267355), 
     new GLatLng(46.22092122197341, 6.153676364285801), 
     new GLatLng(46.22615123408969, 6.149844858907489), 
     new GLatLng(46.22851200024137, 6.149876939987202), 
     new GLatLng(46.22945159836955, 6.142758190170017), 
     new GLatLng(46.21735908463437, 6.141457132705133), 
     new GLatLng(46.21753573755057, 6.138058122426195), 
     new GLatLng(46.21270329318585, 6.134903900311617) 
     ], "#6b1f43", 2, 0.9, "#92c87f", 0.5); 

alors:

map.addOverlay(zone_up_montblanc); 

Polygones apparaît sur ma carte, pas de problème. Mais la chose que je dois faire maintenant est d'ouvrir une "InfoWindow" en cliquant sur chaque polygone (avec un contenu différent pour chaque polygone).

Est-ce que quelqu'un avait une idée ou un exemple?

Merci beaucoup pour votre aide!

Answer 1

Je décrirai la solution parce que je n'ai pas utilisé l'API depuis un moment, et que j'ai du mal à télécharger de plus grandes quantités de code - pas utilisé ici pour la fonction d'édition de code. Reportez-vous à la référence de l'API pour les détails.

Alors, permet de démarrer:

1. Vous ajoutez des polygones à l'aide map.AddOverlay(), la carte stocke alors vos polygones.
2. Déclarez un gestionnaire d'événements qui intercepte les clics sur la carte. Ce gestionnaire d'événement recevra un GLatLng de l'emplacement cliqué, et la superposition sur laquelle vous avez cliqué (dans votre cas, le polygone). Vous pouvez effectuer un test de type simple pour décider si la superposition est un polygone.
3. Dans le gestionnaire d'événements, utilisez map.openInfoWindowHtml(), en transmettant le GLatLng fourni comme emplacement et le contenu HTML que vous souhaitez afficher.

C'est aussi simple que ça! Vous devrez rechercher comment vous attachez des gestionnaires d'événements car je ne me souviens pas des détails sur le dessus de ma tête. Donc, les choses que vous devez rechercher dans l'API sont:

• Ajout des gestionnaires d'événements à la carte
• Vérification du type d'une superposition

Vous devriez être en mesure de trouver les méthodes pour appeler et toutes les informations sur la page api:

http://code.google.com/apis/maps/documentation/reference.html

Bonne chance!

Answer 2

Salut et merci beaucoup filip-fku!

grâce à votre commentaire, je trouve finalement comment faire cela! :-) donc, si la recherche de quelqu'un pour « comment faire », voici l'extrait de code:

GEvent.addListener(zone_up_champagne, "click", function(overlay,latlng) { 
    map.openInfoWindowHtml(overlay, '<strong>Your html things :</strong><br />etc...'); 
}); 

espère que cela peut aide!

merci encore filip!:)

Answer 3

en V3, vous auriez toujours utiliser le infowindow, mais avec une syntaxe différente:

function initialize() { 

// SOME CODE 
var mont_blanc_path_array = [ 
new google.maps.LatLng(46.21270329318585, 6.134903900311617), 
new google.maps.LatLng(46.20538443787925, 6.136844716370282), 
new google.maps.LatLng(46.20525043957647, 6.141375978638086) 
]; 
zone_up_montblanc = new google.maps.Polygon({ 
    editable: false,  
    paths: mont_blanc_path_array,  
    fillColor: "#0000FF", 
    fillOpacity: 0.5, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0,  
    strokeWeight: 2 
}); 
// Creating InfoWindow object 
var infowindow = new google.maps.InfoWindow({ 
    content: ' ', 
    suppressMapPan:true 
}); 
eventPolygonClick = google.maps.event.addListener(zone_up_montblanc, 'click', function() { 
    // MORE CODE OR FUNCTION CALLS 
}); 
// MORE CODE 

} 

partout où vous sentir comme changer le texte et l'affichage de la infowindow:

infowindow.setContent("CLICKED me"); 
infowindow.open(map, zone_up_montblanc); 

j'ai fait les variables globales polygon et eventlistener (en supprimant "var" dans la déclaration de variable), de sorte que vous puissiez les modifier dans d'autres fonctions. cela s'avère difficile avec le comportement d'infowindow. Certaines personnes préfèrent les instances d'infowindow, je préfère avoir une instance globale et modifier son contenu à la volée. méfiez-vous de l'effet des déclarations variables!

autre addListener pour les polygones sont assez bogués et devraient être testés sur tous les principaux navigateurs avant publication, en particulier les variations de DRAGGING et MOUSEOVER.

cela a une référence: http://code.google.com/apis/maps/documentation/javascript/overlays.html

Answer 4

J'ai trouvé une solution très agréable d'avoir plusieurs polygones avec infowindows individuels.

voici mon code:

<script type="text/javascript" 
     src="https://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript" charset="utf-8"> 

    var map; 
    var cities = { 
     "Hamburg":[ 
      [53.60, 9.75], 
      [53.73, 10.19], 
      [53.48, 10.22] 
     ], 
     "Hannover":[ 
      [52.34, 9.61], 
      [52.28, 9.81], 
      [52.43, 9.85] 
     ], 
     "Bremen":[ 
      [53.22, 8.49], 
      [53.12, 8.92], 
      [53.02, 8.72] 
     ] 
    }; 
    var opened_info = new google.maps.InfoWindow(); 

    function init() { 
     var mapOptions = { 
      zoom:8, 
      center:new google.maps.LatLng(53, 9.2), 
      mapTypeId:google.maps.MapTypeId.TERRAIN 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
       mapOptions); 
     for (var c in cities) { 
      var coods = cities[c] 
      var polyPath = []; 
      for (j = 0; j < coods.length; j++) { 
       polyPath.push(new google.maps.LatLng(coods[j][0], coods[j][1])); 
      } 
      var shape = new google.maps.Polygon({ 
       paths:polyPath, 
       fillColor:"#00FF00", 
       fillOpacity:0.6, 
      }); 
      shape.infowindow = new google.maps.InfoWindow(
        { 
         content:"<b>" + c + "</b>" + "</br>", 
        }); 
      shape.infowindow.name = c; 
      shape.setMap(map); 
      google.maps.event.addListener(shape, 'click', showInfo); 
     } 

    } 
    ; 

    function showInfo(event) { 
     opened_info.close(); 
     if (opened_info.name != this.infowindow.name) { 
      this.infowindow.setPosition(event.latLng); 
      this.infowindow.open(map); 
      opened_info = this.infowindow; 
     } 
    } 

</script> 

Il fournit également la fonction de fermer les Infowindows en cliquant sur le même polygone à nouveau.

Answer 5

Aucune infowindow globale requise. initialisez l'infowindow dans le travail du gestionnaire d'événements. utilise ce protoype pour vérifier si le point est contenu dans une instance du polygone dans un tableau de polygones.

http://hammerspace.co.uk/projects/maps/

Il y a un exemple qui fonctionne à http://www.ikeepuposted.com/area_served.aspx