Aller au contenu

2. Enrichir la carte avec des boutons et des contrôles#

📆 Date de publication initiale : 22 août 2008

⚠ L'API Google Maps v2 est dépréciée depuis le 19 mai 2010.

Introduction#

logo Google

Suite au tutoriel d'introduction sur l'API Google Maps, il devient nécessaire d'enrichir un peu la carte de boutons de contrôle et de sélecteurs de vue. Nous verrons ici comment utiliser les méthodes de l'API Google Maps pour étoffer la carte.

Initialisation#

Nous utiliserons la carte définie dans le tutoriel d'introduction à l'API Google Maps pour l'enrichir. Les méthodes ajoutées se feront donc dans la fonction initialize() précédemment définie, le reste de la page HTML n'étant pas modifié.

Control Classes#

Il existe de nombreuses fonctionnalités dans l'API Google Maps pour définir les contrôles de la carte.

  • Ajouter le contrôle des types de vue
map.addControl(new GMapTypeControl());
  • Enlever le type de carte G_HYBRID_MAP
map.removeMapType(G_HYBRID_MAP);
  • Ajouter le type "Relief"
map.addMapType(G_PHYSICAL_MAP);
  • Définir par défaut le type de carte "Relief"
map.setMapType(G_PHYSICAL_MAP);
  • ajouter la carte de navigation globale
map.addControl(new GOverviewMapControl());
  • Ajouter l'échelle
map.addControl(new GScaleControl());
  • Ajouter les boutons de zoom et de navigation
map.addControl(new GLargeMapControl());
  • Ajouter la possibilité de zoomer grâce à la molette de la souris
map.enableScrollWheelZoom();

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] 2. Introduction sur les contrôles
    </title>
    <style type="text/css">
      html { overflow:hidden; height:100%; }
      body { height:100%; margin:0; }
      #map { width:100%; height:100%; }
    </style>
    <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();
        }
        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#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://88.191.142.86/fabien/geotribu/tuto/gmaps-v2/tuto2.html" height="350px" width="100%"></iframe>

Résultat pleine page

Remarques#

Il existe de nombreux autres types de contrôles - API Google Maps - à vous de les tester

Conclusion#

L'ajout de contrôle sur une carte Google Maps est très simple tout comme la création d'une simple carte. Il est cependant nécessaire de parcourir l'API pour voir les différentes classes et méthodes qu'il est possible d'utiliser. Il existe de nombreux types de vue différents :

  • G_NORMAL_MAP : carte simple - par défaut
  • G_SATELLITE_MAP : vue satellite
  • G_HYBRID_MAP : couplage vue satellite et carte simple
  • G_PHYSICAL_MAP : carte relief
  • G_MOON_ELEVATION_MAP : vue relief de la Lune ...
  • G_MOON_VISIBLE_MAP : vue aérienne de la Lune ...
  • G_MARS_ELEVATION_MAP : vue relief de Mars ...
  • G_MARS_VISIBLE_MAP : vue 'mode visible' de Mars ..
  • G_MARS_INFRARED_MAP : vue 'infrarouge' de Mars ...
  • G_SKY_VISIBLE_MAP : vue du 'ciel' ...
  • G_SATELLITE_3D_MAP : vue 3D Google Earth - que nous verrons par la suite dans un prochain tutoriel sur l'utilisation de l'API Google Earth et du plugin

Auteur·ice#

Fabien Goblet#

portrait Fabien Goblet

Informaticien et géographe de formation, je suis j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, je développe j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.

J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.

J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement et sert principalement aux notifications de réponse. Les commentaires sont automatiquement republiés sur nos réseaux sociaux pour favoriser la discussion. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA