Marathon de Paris 2005
Marathon de Sénart 2006
Marathon de Sénart 2008
«
»

Insertion carte Google Maps

Après un peu de recherche sur le web, j’ai réussi à insérer un parcours issu de mon GARMIN FORERUNNER 201 (via SportTracks) sur mon blog dans une interface Google Maps.

Pré-requis

  1. une API KEY Google Maps à récupérer ici: http://www.google.fr/apis/maps/signup.html
  2. un fichier KML déposé par exemple sur http://MONSITE.AMOI/MON DOSSIER/MON FICHIER.kml

Code d’affichage

Dans l’interface d’administration de DOTCLEAR (v2 beta 6), rendez vous dans le champ « Contenu » (format wiki) et tapez le code suivant à l’endroit où vous souhaitez afficher la carte:

 ///html     <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=VOTRE API KEY"       type="text/javascript"></script>     <style type="text/css">     v\:* {       behavior:url(#default#VML);     }     </style>     <script type="text/javascript">     var map;     var geoXml = new GGeoXml("http://MONSITE.AMOI/MON DOSSIER/MON FICHIER.kml");     var toggleState = 1; function onLoad() {   if (GBrowserIsCompatible()) {     map = new GMap2(document.getElementById("map"));     map.addControl(new GLargeMapControl());     map.setCenter(new GLatLng(45.00,2.00), 11);     map.addControl(new GLargeMapControl());     map.addOverlay(geoXml);   } } function toggleMyKml() {   if (toggleState == 1) {     map.removeOverlay(geoXml);     toggleState = 0;   } else {     map.addOverlay(geoXml);     toggleState = 1;   } } </script>   <body onload="onLoad()">     <div id="map" style="width: 474px; height: 355px; float:left; border: 2px solid black;"></div>     </div>     <br clear="all"/>     <br/>    <input type="button" value="Toggle KML" onClick="toggleMyKml();"/>   </body>

///

Personnalisation

  • Ligne 2 du code: entrer votre Api key obtenue entre les guillemets
  • Ligne 12 du code: entrer l’adresse de votre fichier KML entre les guillemets
  • Ligne 19 du code: centrer votre carte (aide ici: http://mapki.com/getLonLat.php ) et régler votre facteur de zoom
  • Ligne 37 du code: ajuster la taille de la fenêtre, etc…

(Exemple de carte)

Cet article a été écrit Jeudi 9 août 2007 à 20:00 dans la catégorie Blog. Vous pouvez suivre les commentaires grâce au flux RSS 2.0.

3 commentaires pour l'article “Insertion carte Google Maps”

  1. MyAvatars 0.2 Sandyonara a écrit:
    9 août 2007 à 23:39

    Interessant je sais pas si c’est possible chez OB, j’essaierai dès que j’aurai le temps, merçi

  2. MyAvatars 0.2 AirV a écrit:
    10 août 2007 à 13:58

    Interessant pour afficher une carte mais c’est tout de meme plus pratique un plugin pour de multiples affichages non ?

  3. MyAvatars 0.2 polaris a écrit:
    10 août 2007 à 16:52

    Je n’en ai pas encore trouvé de tout fait pour Dotclear ! Alors, en attendant, cette méthode me convient…