8. Superposer un fichier KML et enrichir les infobulles

Ecrit par fabien le 5/09/2008.

| |

Sommaire

Introduction
Initialisation
Appel d'un fichier KML et affichage sur la carte
Mini-carte dans une infobulle
Code complet
Démonstration
Remarques
Conclusion

résumé:

Superposer un fichier KML dans une carte Google Maps et afficher une mini-carte dans une infobulle.

pré-requis:

Avoir suivi les précédent tutoriaux de l'API Google Maps.

Introduction

L'API Google Maps permet de superposer des fichiers KML sur une carte. Et d'afficher une mini-carte dans une infobulle (ce qui n'a rien à voir avec l'affichage du KML mais qui peut être intéressant).

Initialisation

Reprendre la carte du deuxième tutoriel.

Appel d'un fichier KML et affichage sur la carte

L'appel à un fichier KML (dans le cas présent un fichier KML bien connu des SIGMA-iens (-ieux, -iois, au choix)) se fait grâce à la classe GGeoXml :

var kml = new GGeoXml("http://88.191.39.115/fabien/geotribu/kml/route.kml");

Et l'affichage grâce à la méthode addOverlay() déjà utilisée précédemment :

map.addOverlay(kml);

Mini-carte dans une infobulle

Créons tout d'abord un marqueur et ajoutons-le à la carte :

var marker1 = new GMarker(new GLatLng(43.57769664771851, 1.402821992034912));
map.addOverlay(marker1);

Puis gérons l'événement lors d'un clic sur celui-ci :

GEvent.addListener(marker1, 'click', function() {
  marker1.showMapBlowup({zoomLevel:18,mapType:G_SATELLITE_MAP});
});

Code complet

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
     [Google Maps] 8. Superposer un fichier .kml et enrichir les info-bulles
   </title>
   <style type="text/css">
     html { overflow:hidden; height:100%; } 
     body { height:100%; margin:0; }
     #map { width:100%; height:100%; }
   </style>
   <link rel="icon" type="image/png" href="./favicon.png"/>
   <script src="http://maps.google.com/maps?file=api&v=2.x&key=votre_clé_ici" type="text/javascript"></script>
   <script type="text/javascript">
 
     function initialize() {
       if (GBrowserIsCompatible()) {
          var map = new GMap2(document.getElementById('map'));
          map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);
          map.addControl(new GMapTypeControl());
          map.removeMapType(G_HYBRID_MAP);
          map.addMapType(G_PHYSICAL_MAP);
          map.setMapType(G_PHYSICAL_MAP);
          map.addControl(new GOverviewMapControl());
          map.addControl(new GScaleControl());
          map.addControl(new GLargeMapControl());
          map.enableScrollWheelZoom();
 
 
          var kml = new GGeoXml("http://88.191.39.115/fabien/geotribu/kml/route.kml");
          map.addOverlay(kml);
 
          var marker1 = new GMarker(new GLatLng(43.57769664771851, 1.402821992034912));
          map.addOverlay(marker1);
          GEvent.addListener(marker1, 'click', function() {
           marker1.showMapBlowup({zoomLevel:18,mapType:G_SATELLITE_MAP});
          });
 
          var marker2 = new GMarker(new GLatLng(43.53507914503071, 1.493223511978854));
          map.addOverlay(marker2);
          GEvent.addListener(marker2, 'click', function() {
           marker2.showMapBlowup({zoomLevel:18,mapType:G_SATELLITE_MAP});
          });
      }
      else{
       alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
      }
    }
  </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
   </body>
</html>

Démonstration

Résultat pleine page

Remarques

Toujours se référer à l'API Google Maps - Google Maps API Reference pour les différentes classes, méthodes et options utilisées.
Le fichier XML doit toujours être une URL accessible.
Consulter cette page pour les spécifications des fichiers KML.

Conclusion

Ce tutoriel décrit les étapes pour ajouter un fichier KML à la carte et pour afficher une mini-carte dans une infobulle.
Les possiblités d'utilisation de superposition d'un fichier sont nombreuses - exemple le projet Inde à vélo

Auteur : Fabien - fabien.goblet [ at ] gmail.com

Retour en haut

GeoTribu