Insérer une carte Google Maps dans votre blog
Pour ceux qui souhaitent mettre sur leur blog une carte google maps permettant de les localiser, voici un petit tuto pour y parvenir.
L'exemple suivant affiche une carte Google Maps centrée sur le lieu géographique que vous déterminerez (voir point n°5). Le centre de la carte est l'icône d'une petite maison, un clic sur l'icône permet de zoomer d'un niveau.
1) Tout d'abord, il faut vous procurer une "API key". Ce code devra être envoyé par votre page pour afficher votre carte. Vous pouvez vous le procurer en donnant votre url sur cette page. Attention : il faut donner l'adresse du répertoire où est installé votre blog. Par exemple, si votre blog est dans www.monsite.tld/dotclear/, c'est l'url à donner.
2) Ajouter dans votre template.php le code suivant :
<script src="http://maps.google.com/maps?file=api&v=2&key=votreAPIkey" type="text/javascript"></script>
juste avant la balise </head>
3) Modifier la balise <body> ainsi :
<body onload="load()" onunload="GUnload()">
4) Mettre sur votre serveur un fichier icon.png avec l'icône que vous choisirez. Vous devrez en créer une de 32x32 pixels
5) Déterminer vos coordonnées GPS en degrés décimaux (chez moi : 43.039712, 6.125924). Si vous n'avez pas de GPS, utilisez par exemple cette page pour connaître vos coordonnées.
6) Dans un billet en wiki, collez le code suivant :
///html <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var point = new GLatLng(43.039712, 6.125924); map.setCenter(point, 10); var icon = new GIcon(); icon.image = "url/icon.png"; icon.iconSize=new GSize(32,32); icon.iconAnchor=new GPoint(16,16); var marker = new GMarker(point, {icon:icon, title:"Mon joli texte"}); map.addOverlay(marker); GEvent.addListener(marker, "click", function() { map.setZoom(map.getZoom()+1); }); } } //]]> </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> <div id="map"></div> ///
C'est presque terminé. La carte s'affichera dans un <div id="map">. Dans style.css, ajoutez donc cette règle :
#map { width: 100%; height: 300px; padding : 10 px; border : 1px solid #1B5EA8; margin : 0 auto;}
Avec width:100%; la carte prendra toute la largeur du billet, utile si vous avez un thème fluide...
Ce n'est qu'une petite partie des possibilités offertes. Pour ceux qui connaissent JavaScript, vous pourrez personnaliser encore votre carte et ses interactions en consultant l'aide de l'API ici.
Commentaires
1. Le dimanche 11 février 2007 à 10:56, par klog
2. Le lundi 12 février 2007 à 15:43, par Olivier06
3. Le dimanche 18 février 2007 à 20:03, par OSO
4. Le mardi 6 mars 2007 à 15:52, par DeepSurf
5. Le mardi 6 mars 2007 à 15:54, par Deepsurf
6. Le mercredi 7 mars 2007 à 00:50, par jean
7. Le vendredi 9 mars 2007 à 12:48, par karl
8. Le mardi 27 mars 2007 à 11:52, par mrj
9. Le jeudi 5 avril 2007 à 22:24, par jean-dimitri dewavrin
10. Le jeudi 3 mai 2007 à 15:57, par David
11. Le mardi 19 juin 2007 à 15:31, par gloup
12. Le mardi 19 juin 2007 à 15:48, par gloup
13. Le dimanche 8 juillet 2007 à 01:23, par la2pic
14. Le lundi 13 août 2007 à 12:50, par Stef
15. Le mardi 16 octobre 2007 à 11:38, par R i C H a r D
16. Le samedi 22 décembre 2007 à 09:42, par Titi
17. Le mercredi 9 janvier 2008 à 10:52, par Dam
18. Le dimanche 17 février 2008 à 18:11, par GonZ
19. Le samedi 8 mars 2008 à 16:44, par djembeman
20. Le lundi 28 avril 2008 à 22:44, par coucou
21. Le mardi 20 mai 2008 à 10:03, par Steph
22. Le vendredi 27 juin 2008 à 04:32, par nikus
23. Le dimanche 28 décembre 2008 à 19:09, par polio
24. Le vendredi 6 février 2009 à 10:22, par moien
25. Le mercredi 18 février 2009 à 15:49, par Invité
26. Le samedi 11 avril 2009 à 18:25, par kika
27. Le vendredi 7 août 2009 à 14:35, par menoulette
28. Le mardi 22 septembre 2009 à 04:39, par Nina_Tool
29. Le vendredi 29 janvier 2010 à 16:18, par dumont
30. Le mardi 16 février 2010 à 21:14, par padigue85
31. Le dimanche 28 février 2010 à 11:38, par Mario
32. Le mercredi 26 mai 2010 à 22:16, par Nick
33. Le dimanche 6 février 2011 à 02:07, par marseille
34. Le mercredi 16 mars 2011 à 18:24, par Expert SEO