Insérer l’API GoogleMap sur son site !
03/03/2009
Voici plusieurs manières d’insérer dans sa page internet ou son blog une carte GoogleMap dynamique et personnalisée !
Modifier le code HTML
Cette méthode a été donné par Pour insérer cette carte il y a 5 étapes :
- Etape 1 : commencez par créer une « clé API Google Maps » que vous obtiendrez iciAcceptez ici les conditions de Google, et notez (c’est important) le dossier exact dans lequel sera la page en question :
Sur la page suivante, notez soigneusement la clef ainsi générée (vous pouvez en créer autant que de dossiers nécessaires) : 
- Etape 2 : trouvez les coordonnées exactes de l’endroit ou vous souhaitez centrer votre carte. Si vous n’avez pas de GPS, il y a plusieurs pages sur lInternet qui vous les donneront… Par exemple http://www.tageo.com, ou http://earth.google.com ou encore :http://maps.google.fr (cliquez en haut à droite sur le lien « obtenir l’URL de cette page »)
- Etape 3 : vous insérez dans le head de la page où sera la carte le bout de code suivante :
================================<meta http-equiv= »content-type » content= »text/html; charset=utf-8″/> <title>Ma carte Google Maps </title> <script src= »http://maps.google.com/maps?file=api&v=2&key=votre_clé_Google_maps type= »text/javascript »> </script> <script type= »text/javascript »> <!– Google map –> <script type= »text/javascript »> var map; function onLoad() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(« Gmap »)); <!– controle du zoom –> map.addControl(new GLargeMapControl()); <!– controle satellite –> map.addControl(new GMapTypeControl()); <!– longitude, latitude et niveau de zoom initial –> map.setCenter(new GLatLng(45.202485, 1.067090), 13); <!– bulle de marquage centrale + légende –> map.openInfoWindowHtml( new GLatLng(45.202485, 1.067090), « Mon adresse (pouvant comporter du code HTML) « ); } } </script> <noscript><p>Désolé, JavaScript doit être activé pour utiliser Google Maps. Il semble que ce ne soit pas le cas avec votre navigateur. Pour voir cette carte, activez javascript et rechargez la page.</p> </noscript> ================================
en remplaçant bien sûr la clé Google, la longitude et la latitude par les votres…(NB : il est important que le jeu de charactère soit en UTF8 et non en iso-8859-1, sinon votre carte risque de bugguer !)
- Etape 4 : Remplacez la balise BODY par le code suivant :
================================ <body onload= »onLoad() »> ================================
- Etape 5 : A l’endroit où va être affichée la carte, insérez le code suivant :
================================<div id= »Gmap » style= »width: 500px; height: 300px »></div> ================================
Utiliser un générateur en ligne
Lorem ipsum…
