Aller au contenu

1. Introduction à l'API Google Maps#

📆 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

L'API Google Maps permet d'intégrer une carte semblable à celle de Google dans ses pages Web en utilisant un peu de Javascript.

Appel à l'API grâce à la clé#

Pour utiliser l'API Google Maps, il est nécessaire d'obtenir une clé gratuite à cette adresse. Et d'écrire cette ligne dans le de la page HTML qui contiendra la carte Google Maps :

  • v=2.x : ici on note la version de l'API utilisée dans notre projet :
    • 2.x correspond à la dernière version de l'API
    • 2.s correspond à la dernière version stable de l'API
    • 2 correspond à la version courante Détail des changements de l'API : http://mapki.com/wiki/Changelog

NB : Nous utiliserons par la suite toujours la version courante de l'API afin d'éviter les mauvaises surprises.

Code Javascript de déclaration de la carte#

Nous déclarons la fonction initialize() qui sera chargée lors du chargement de la page Web. Cette fonction contient les instructions afin de déclarer la carte Google Maps. La structure conditionnelle 'if then else' permet d'alerter l'utilisateur si son navigateur n'accepte pas le JavaScript grâce à la fonction GBrowserIsCompatible(). Nous déclarons ensuite l'objet map qui sera affiché dans le bloc dont l'identifiant sera 'map_canvas' de la page HTML :

var map = new GMap2(document.getElementById('map'));

et définissons un centre et un niveau de zoom pour cet objet.

map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);

Code HTML#

Afin d'afficher la carte, il est nécessaire de déclarer un bloc div qui contiendra la carte :

<div id="map"></div>

Et il faut appeler la fonction initialize() lors du chargement de la page :

<body onload="initialize()" onunload="GUnload()">

La fonction GUnload() permet de libérer la mémoire lorsque l'on quitte la page Web.

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] 1. Introduction à Google Maps
    </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.57769664771851, 1.402821992034912),16);
        }
        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/tuto1.html" height="350px" width="100%"></iframe>

Résultat pleine page

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