API-V2-MAPS.com



Comment utiliser les API's Google Maps, tutoriels Google Maps, cartographie Google Maps


Image
image
image
image





     

MULTIPLE POINTS D'INTÉRÊT (POI) AVEC MARQUEURS PERSONNALISÉS ET BULLES


Ce script va pouvoir présenter une carte avec plusieurs marqueurs personnalisés.
Les marqueurs sont cliquables et ouvriront une bulles qui peux contenir textes et images.
En vert : les commentaires sur le script.
En rouge : les éléments configurables.

<html>
  <head>
    <title>Exemple d'application Google Maps : Mupltiple POI avec marqueurs personnalisés et bulles</title>
    // N'oubliez pas de modifier la clé (key), elle est personnalisée à votre nom de domaine
    // La méthode pour obtenir votre clé Google Maps (key) est expliquée sur la page Introduction
    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>

    <script type="text/javascript">//<![CDATA[
      function load()
        {
        // "points" tableau (array) contenant les points d'intérêt (POI)
        // Le tableau "points" contient les champs suivants :
        //  - Latitude
        //  - Londitude
        //  - L'icône qui representera le POI
        //  - Identifiant du POI (idspot)
        //  - Nom du POI
        //  - "comment" peut contenir un descriptif texte et image (peut être codé en HTML)
        points = [
          {
          'latitude': 43.005708,
          'longitude': 2.733766,
          'icon': 'hiking.png',
          'idspot': 1,
          'nom': 'Place des Chasseurs',
          'comment': 'Départ'
          },
          {
          'latitude': 43.000351,
          'longitude': 2.734335,
          'icon': 'hiking.png',
          'idspot': 2,
          'nom': 'Départ VTT',
          'comment': 'Et rando géologique'
          },
          {
          'latitude': 43.000897,
          'longitude': 2.692745,
          'icon': 'parking.png',
          'idspot': 3,
          'nom': 'Parking 4 Chemins',
          'comment': ''
          },
          {
          'latitude': 43.003313,
          'longitude': 2.697852,
          'icon': 'parking.png',
          'idspot': 4,
          'nom': 'Parking Garrigue',
          'comment': ''
          },
          {
          'latitude': 43.006658,
          'longitude': 2.734005,
          'icon': 'parking.png',
          'idspot': 5,
          'nom': 'Parking Mairie',
          'comment': ''
          },
          {
          'latitude': 42.999782,
          'longitude': 2.703881,
          'icon': 'parking.png',
          'idspot': 6,
          'nom': 'Parking Americains',
          'comment': ''
          },
          {
          'latitude': 43.000975,
          'longitude': 2.734169,
          'icon': 'parking.png',
          'idspot': 7,
          'nom': 'Parking Pintru',
          'comment': '<img src="images/vue_parking.jpg" width="200" height="116"
                    alt="Vue parking Pintru" title="Vue parking Pintru">'
          },
          {
          'latitude': 43.000226,
          'longitude': 2.733761,
          'icon': 'picnic.png',
          'idspot': 8,
          'nom': 'Aire de pique-nique',
          'comment': ''
          }];
        if (GBrowserIsCompatible())
          {
          //Init map (centrage - options)
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GSmallMapControl());
          map.addControl(new GScaleControl());
          map.addControl(new GMapTypeControl());
          map.enableScrollWheelZoom();
          map.setCenter(new GLatLng(43.003203,2.715769), 14); // Centre et zoom de la carte
          //Fonction de génération du point d'intérêt repéré par une icônes
          function CreateIcon(poi)
            {
            var MonIcon = new GIcon(G_DEFAULT_ICON);
            MonIcon.image='images/' + poi.icon; // Image du marqueur
            MonIcon.shadow = 'images/shadow.png'; // Image "Ombre"
            MonIcon.iconSize=new GSize(32,32);
            MonIcon.shadowSize = new GSize(51, 37);
            MonIcon.iconAnchor=new GPoint(16,32);
            MonIcon.infoWindowAnchor = new GPoint(5, 1);
            markerOptions = { icon:MonIcon };
            var point = new GLatLng(poi.latitude, poi.longitude); // Position du marqueur
            var marker = new GMarker(point,MonIcon);
            marker.value = poi.idspot;
            // Écouteur d'événement "clic" pour afficher la bulle sur un clic
            GEvent.addListener(marker,"click", function()
              {
              // Préparation du contenu de la bulle
              marker.openInfoWindowHtml('<b><u>' + poi.nom + '</u></b><br>' + poi.comment);
              });
            return marker;
            }
          // Affichage des icônes par appel de la fonction CreateIcon
          // En scanant le tableau (array) "points"
          for(id in points)
            {
            marker = CreateIcon(points[id]);
            map.addOverlay(marker);
            }
          }
        }
    //]]></script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <!-- Définition de la grandeur de la carte (exprimé ici en pixel) -->
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>

Explications :

Les différents points d'intérêt sont définis dans le tableau (array) points (latitude, longitude, icon, idspot, nom, comment). Prenez garde la définition du dernier POI n'est pas suivie d'une virgule après le caractère paragraphe "}" !
La ligne "map.setCenter(new GLatLng(43.003203,2.715769), 14)" permet de définir le centre et le zoom de la carte.
La ligne "MonIcon.image='images/' + poi.icon;" sélectionne l'icône qui représentera le POI, c'est surtout le chemin qui doit conduire au répertoire contenant les images qui est important, dans ce cas, c'est "images/".
La ligne "MonIcon.shadow = 'images/shadow.png';" choisi l'image (chemin de répertoire + nom de l'image) qui servira d'ombrage à votre icône. Petit conseil, choisisez des icônes ayant le même profil comme dans cet exemple, vous ne devrez ainsi gérer qu'une seule ombre !
La ligne "marker.openInfoWindowHtml('<b><u>' + poi.nom + '</u></b><br>' + poi.comment);" sert au montage du contenu de la bulle. Elle peut contenir un code HTML pour faire une petite mise en forme du contenu.
La ligne "<div id="map" style="width: 500px; height: 300px"></div>" est le conteneur de la carte, vous pouvez définir la largeur (width) et la hauteur (height) de votre carte.


Résultat :





     

image


image
Informations :
"Google" et "Google Maps" sont des noms déposés par la société Google, Inc. de Mountain View (Comté de Santa Clara, Californie, USA).















image
  © Copyright 2008© VDC
  Tout droits réservés
  Date de création : 01/06/2008
  Dernière mise à jour : 31/10/2010