API-V2-MAPS.com

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

AJOUT D'UN REPÈRE

Si vous souhaitez donner une petite touche esthétique à votre carte, vous pouver remplacer le marker "ballon" rouge par une icone.

Vous trouverez en bas page une collection de motifs, cela vous évitera de devoir chercher un peu partout sur la "toile".

<html>
  <head>
    <title>Application Google Maps : Ajout d'un repère</title>

    <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()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(46.98025, 3.66943), 6);
// Ajout de la propriété "Marker" (repère personnalisé)
          var point = new GLatLng(46.46968126496654, 1.769024133682251); // Position du marker
// Initialisation d'un nouvel objet GIcon et de ses propriétés
          var MonIcon = new GIcon(G_DEFAULT_ICON);
          MonIcon.shadow = "icones/Sujets/house-s.png"; // Image "Ombre"
          MonIcon.shadowSize=new GSize(56,32); // Dimensions de l'image "Ombre"
          MonIcon.iconSize=new GSize(32,32);
          MonIcon.iconAnchor=new GPoint(16,32);
          MonIcon.image="icones/Sujets/house.png";
// Affichage du marker (repère)
          var marker = new GMarker(point,MonIcon);
          map.addOverlay(marker);
          }
        }
    //]]></script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Explications :

Ajout d'un objet "Marker" (repère personnalisé) à la carte Google Maps.

Le chemin (path) et nom de fichier doivent être adaptés selon l'image que vous avez choisie et selon l'organisation de vos répertoires d'images.

Si vous ne souhaitez pas d'ombre (Shadow) à votre marker enlevez les ligne suivante :
- MonIcon.shadow = "icones/Sujets/house-s.png";
- MonIcon.shadowSize=new GSize(56,32);

Résultat :

Des icones à votre disposition :

Les ballons