API-V2-MAPS.com



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


Image
image
image
image





Page précédente   Page suivante

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
icong19 iconb20 shadow50 icong10 green icong3 icong17 icong4 red-dot blue icong22 icong25 iconb12 purple-dot ballon_degrade_bleu orange iconb15 iconb2 markerI iconr22
markerN iconr25 iconb5 dd-end dd-start iconr4 markerG iconr3 iconr19 ballon_degrade_rouge iconr10 markerU markerR iconr17 iconb14 iconb13 icong24 red icong23 iconb
icong16 orange-dot icong5 icong11 icong2 icong18 iconb21 markerS iconr16 iconr11 markerT markerZ iconr18 markerF ballon_degrade_bleu_clair iconr2 markerA iconr5 markerO iconr24
iconb4 iconb3 markerH iconr23 ballon_degrade_jaune iconr12 markerW markerP iconr15 markerY markerB blue-dot iconr6 iconb9 markerE ballon_degrade_violet iconr1 iconr20 markerK ballon_degrade_orange
markerL iconr8 iconb7 iconb10 iconb17 icong20 iconb19 icong12 icong1 icong15 icong6 iconb22 icong8 coldmarker iconb25 markerM iconr9 iconb6 iconb1 iconr21
markerJ markerD markerC iconr7 iconb8 markerX markerQ green-dot iconr14 iconr13 markerV iconb24 iconr ballon_degrade_vert yellow-dot yellow msmarker.shadow icong9 iconb23 purple
icong14 icong7 icong13 icong icong21 iconb18 iconb16 iconb11                        


Les minis ballons
mm_20_green mm_20_shadow mm_20_brown mm_20_blue mm_20_yellow mm_20_gray mm_20_purple mm_20_orange mm_20_white mm_20_red                    


Les sujets
postoffice-us bar movies caution-s horsebackriding-s truck euro horsebackriding ylw-pushpin subway electronics-s ski-s volcano arts-s ferry
camera-s info-circle-s homegardenbusiness-s bus phone restaurant-s marina plane truck-s landmarks-jp-s caution convienancestore tram-s postoffice-jp sailing-s
sunny info-s lodging-s motorcycling finger shopping-s earthquake favicon.ico lit-s lit cabs restaurant mechanic swimming-s helicopter-s
rail fallingrocks fallingrocks-s convienancestore-s landmarks-jp rainy movies-s rail-s sunny-s salon fingers-s woman-s plane-s recycle-s waterfalls
ski snowflake_simple lodging snack_bar-s hotsprings marina-s phone-s question hiker coffeehouse drinking_water arts blue-pushpin-s bus-s parkinglot-s
grocerystore pharmacy-us-s hospitals-s flag volcano-s picnic-s rainy-s woman man wheel_chair_accessible-s recycle realestate campground-s partly_cloudy-s grocerystore-s
postoffice-jp-s ylw-pushpin-s rangerstation-s yen home picnic trail-s toilets police-s sportvenue-s webcam snack_bar pink-pushpin dollar parkinglot
postoffice-us-s question-s blue-pushpin red-pushpin POI-s tree man-s purple-pushpin-s pink-pushpin-s euro-s coffeehouse-s hotsprings-s snowflake_simple-s helicopter info-circle
webcam2-s webcam2 bar-s water water-s camera golfer salon-s sportvenue green-pushpin-s earthquake-s pharmacy-us purple-pushpin firedept-s partly_cloudy
swimming sun-s subway-s electronics house-s police dollar-s faviconbowling.ico hospitals wheel_chair_accessible cycling drinking_water-s campfire-s hiker-s cafe-s
green-pushpin headquarters-s webcam-s flag-s cabs-s realestate-s campground ferry-s fleche-bas.gif tram fishing-s lt-blue-pushpin-s yen-s cafe gas-s
golfer-s lt-blue-pushpin waterfalls.shadow info sun rangerstation motorcycling-s toilets-s firedept sailing mechanic-s shopping tree-s POI headquarters
red-pushpin-s cycling-s gas house homegardenbusiness trail fishing campfire              





Page précédente   Page suivante

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 : 09/01/2010