all html : Le portail des webmaster

Article publié le mercredi 06 septembre 2006 par charly75.
Cet article est classé dans les catégories « Outils »

Voici un code, complet, simple à installer, pour créer des cartes interactives en utilisant la base de "Google Maps API". Un gadget très ludique pour les internautes.

Pour commencer : il faut impérativement vous inscrire dans le programme Google Maps API

une fois que cela est fait mettre la clé dans le premier script à la place de "votre clé google"

Ensuite vous devez modifier la ligne qui contient le "map.setCenter"
- new GLatLng(27.1373,31.5527) est pour les longitudes et les latitudes
- ,6, c'est la profondeur du zoom
- G_SATELLITE_MAP indique que la carte s'affiche en version satellite

Pour finir votre personnalisation :
vous pouvez rajouter des points de ciblage et des bulles d'infos.
Ne mettre que des liens du type [url=http://www.monsite.com/mesimages/etc.jpg]http://www.monsite.com/mesimages/etc.jpg

exemple de point : var point = new GLatLng(30.0386,31.2245);

exemple de bulle avec liens + images :
var marker = createMarker(point,'<div class="texte-11"><a href="url de votre lien">Le Caire</a><br><img src="url de votre image" border="0" height="80" width="180"><br>votre texte</div>')

voici le code complet pour un démarrage en douceur surtout laissez dans la partie BODY le id="message". C'est lui qui vous aidera à trouver vos lat. et long.:

Dans le HEAD
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=votre clé google" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load(){ if (GBrowserIsCompatible()){ function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } var map = new GMap2(document.getElementById("map")); GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); document.getElementById("message").innerHTML = center.toString(); }); map.setCenter(new GLatLng(27.1373,31.5527),6,G_SATELLITE_MAP); /* controle du zoom*/ map.addControl(new GSmallMapControl()); /* type de zoom carte ou sat */ map.addControl(new GMapTypeControl()); /* fenetre d'information lat long*/ map.openInfoWindow(map.getCenter(), /* ajout d'un point cliquable avec bulle */ var point = new GLatLng(30.0386,31.2245); var marker = createMarker(point,'<div class="texte-11"><a href="url de votre lien">Le caire</a><br><img src="url de votre image" border="0" height="80" width="180"><br>votre texte</div>') map.addOverlay(marker); } } //]]> </script>

dans le BODY :
<div align="center" id="map" style="width: 500px; height: 500px"></div> <div id="message" class="texte" align="center"></div>

- Voir le resultat avec liens : Louxor
- Voir le resultat avec zoom precis + images et liens : Louxor

Merci de complèter si vous avez mieux.

Sources de l'information : Google Maps API et Visite Egypte