Le portail francophone de la géomatique

Xavier Julian · Mon 09 November 2015 14:45

Bonjour à tous,

J'ai commencé un début de code pour créer une carte avec des polygones via l'API de Google Maps.
Jusqu'ici tout va bien, je me débrouille avec la documentation fournie par Google :
https://developers.google.com/maps/docu … ipt/shapes

Je voudrais qu'une infobulle apparaisse quand on clique sur le polygone.
Après plusieurs tentatives de rendre tout mon polygone cliquable, je me resous à faire apparaitre une infoWindow au centroïde de mes polygones, mais ça ne marche toujours pas.
Voilà un extrait du code avec un seul polygone : des idées ?

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /> 
        <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        #map { height: 100%; }
        </style> 
    </head>

    <body>
        <div id="map"></div>
            
            <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkrMsjLURCPzjNxAdELrACsxRayqLjaxc&callback=initMap">
            </script> //clé personnelle fournie par Google
            
            <script type="text/javascript">
                function initMap() 
                {
                    var mapOptions = {
                        center: {lat: 44.6, lng: 4.8},
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.TERRAIN //attention pas de virgule à la dernière propriété
                    }; //option de la carte : centroide, niveau de zoom, type de fond)
                        
                    var map = new google.maps.Map(document.getElementById('map'), mapOptions
                    ); //initialisation du fond de carte google et renvoi aux options ci-dessus. Ma carte s'appelle désormais 'map'
                                
                    var TDCDPCoords = [
                        {lat:44.1357727338, lng:4.80827009788},
                        {lat:44.1194285955, lng:4.8362333205},
                        .../...
                        {lat:44.1323322384, lng:4.80547377562},
                        {lat:44.1357727338, lng:4.80827009788} 
                    ]; //sommets du polygone
                    
                    var TDCDP = new google.maps.Polygon({
                        paths: TDCDPCoords, //renvoi vers les coordonnées du polygone (sommets)
                        strokeColor: 'B378D3', //couleur des bords du polygone
                        strokeOpacity: 0.8, //opacité des bords du polygone
                        strokeWeight: 1, //épaisseur des bords du polygone
                        fillColor: 'B378D3', //couleur de remplissage du polygone
                        fillOpacity: 0.35, //opacité de remplissage du polygone
                        name:'TERRASSE DE CHATEAUNEUF-DU-PAPE' //nom du polygone
                    });
                                        
                    TDCDP.setMap(map); //ceci permet au polygone TDCDP d'être affiché sur la carte (nommée 'map')
                                            
                    google.maps.event.addListener(TDCDP, 'click', function() {
                        infoWindow.open(map);
                        infoWindows.setPosition (44.248654, 4.9825);
                        infoWindow.setContent('TERRASSE DE CHATEAUNEUF-DU-PAPE');
                    }); //indique que le polygone réagit au clic en ouvrant une infobulle, fixe sa position et son contenu
                                        
                }
            </script>
    </body>
</html>

Merci par avance.

Xavier Julian · Thu 12 November 2015 16:17

Pour ceux que ça intéresse, j'ai trouvé la solution à l'aide d'un ami.
Il faut appeler une variable infoWindows en amont des polygones comme ceci :

Code:

var infoWindow = new google.maps.InfoWindow(); //initialisation de la fonction infobulle
var map = new google.maps.Map(document.getElementById('map'), mapOptions); //initialisation du fond de carte google et renvoi aux options

puis configurer chacune des infobulles des différents polygones comme cela :

Code:

google.maps.event.addListener(mon_polygone, 'click', function(e) { //ajout d'un évènement qui réagit au clic de la souris sur le polygone mon_polygone
   infoWindow.open(map);
   infoWindow.setPosition (e.latLng); //l'infobulle se met à jour là où on clique
   infoWindow.setContent('blablabla');//contenu de l'infobulle
};

Dernière modification par Xavier Julian (Thu 12 November 2015 16:23)

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

Annonce

#1 Mon 09 November 2015 14:45

[API Google Maps] Ajouter InfoWindows sur couche de Polygon

Code:

#2 Thu 12 November 2015 16:17

Re: [API Google Maps] Ajouter InfoWindows sur couche de Polygon

Code:

Code:

Pied de page des forums