Google Maps API

Tue, 07/26/2011 - 18:30 — dmaechler

Google Maps API

Définition d'une API
Installation de l'API Google Maps
Paramètres de l'URL
Google Maps avec SSL
Mise en place de la map
Chargement asynchrone de l'API Google Maps
Gestion des évènements Google Maps
Les contrôles Google Maps
Les marqueurs Google Maps
Utiliser la géolocalisation
Utilisation de la librairie Geometry pour le calcul de distance

Introduction

L'API Google Maps fournit une interface intuitive et très réactive construite en utilisant les technologies AJAX. C'est une API ouverte permettant la personnalisation de la carte y compris la possibilité d'ajouter au sein de l'application des données spécifiques à la carte (personnalisation des contrôles, gérer les évènements, créer des marqueurs avec info-bulle...). Encore mieux, Google donne accès à ce service gratuitement !
Dans cet article nous allons examiner quelques-unes des fonctionnalités de base fournies par l'API Google Maps.

Qu'est ce qu'une API ?

(Application Programming Interface)

Une API est une interface fournie par un programme informatique. Elle permet l'interaction des programmes les uns avec les autres.
D'un point de vue technique c'est un ensemble de fonctions, procédures ou classes mises à disposition par une bibliothèque logicielle, un système d'exploitation ou un service.
Toute application web peut autoriser ou non des développeurs tiers à utiliser une partie de ses fonctionnalités, et ce de plusieurs façons :

En téléchargeant une bibliothèque de fonctions pour l'inclure directement sur son site
En récupérant une donnée précise en construisant une URL comme avec Google charts https://chart.googleapis.com/chart?cht=chart_type&chd=chart_data&chs=cha......
Ou comme Google Maps, en incluant directement la bibliothèque en ligne

Installation de l'API

On va inclure la bibliothèque Google Maps directement dans le code Javascript de la page. Cette URL permet d'accéder à l'ensemble des fonctionnalités de l'API.
Exemple d'ajout d'une balise script pour inclure les fonctions de Google Maps dans l'application cible :

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

Paramètres de l'URL

Plusieurs déclinaisons de l'API sont disponibles en ajoutant des paramètres à l'URL de base; en voici quelques exemples:

sensor (true ou false) : L'utilisation ou non de la géolocalisation
language : Langue des textes à afficher sur la carte
region : Le pays

On peut ajouter d'autres paramètres à l'URL pour inclure des librairies additionnelles :

Geometry : inclut des fonctions nécessaires pour le calcul scalaire de valeurs géométriques sur la surface de la terre.
Adsense : permet à votre application Maps d'inclure des annonces contextuelles, vous permettant de partager les revenus publicitaires pour les annonces diffusées aux utilisateurs.
Panoramio :contient des fonctionnalités permettant d'ajouter la fonctionnalité Panoramio. Quand on clique sur l’icône d'une photo avec Panoramio, par défaut on a une pop-up qui s'ouvre avec des informations et la photo en plus grand.

NOTE : On peut ajouter plusieurs librairies Google Maps dans l’URL, il suffit de les séparer par des virgules.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=adsense,geometry&sensor=true"></script>

On se retrouve donc avec une déclaration finale de ce type :

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
</head>

NOTE : On spécifie une taille pour le html et le body (pour les navigateurs plus anciens il faut préciser la taille des éléments parents sinon ceux-ci supposent que la taille est de 0x0px).
Ici la balise meta spécifie le mode plein écran et que la carte n'est pas redimensionnable par l'utilisateur.

Google Maps avec SSL

L'utilisation du SSL avec Google Maps permet d'éviter les avertissements de sécurité dans la plupart des navigateurs.
Ce genre d'utilisation est prévue pour les sites collectant des données confidentielles sur des utilisateurs (telle que la localisation personnelle ou professionnelle d'un utilisateur dans des requêtes)

Exemple d'implémentation :

<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?v=3.4&sensor=true"></script>

Mise en place de la map

Nous allons afficher la carte une fois la page html chargée. Pour cela nous allons ajouter l'attribut "onload" à la balise "body" avec en paramètre la fonction d'initialisation de la carte :

<body onload="initialize()">
<script type="text/javascript">
function initialize() {
//...
}
</script>

Ensuite il reste à instancier un nouvel objet google.maps.Map comme ceci :

function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
   zoom: 19,
   center: new google.maps.LatLng(48.8695490, 2.3513734),
   mapTypeId: google.maps.MapTypeId.ROADMAP 
});
}

La nouvelle map sera contenue dans la div "map_canvas", centrée sur les coordonnées latitude 48.8695490 et longitude 2.3513734 (qui représente la postion de The Coding Machine à Paris 02ème) et avec un niveau de zoom très précis.

Le paramètre mapTypeId sert à définir le type de map que l'on souhaite, il en existe 4 :

ROADMAP : Affiche le plan classique, sans image satellite ni relief
SATELLITE : Pour les photos satellite
HYBRID : Pour afficher les photos satellite avec le plan superposé (les routes, le nom des villes).
TERRAIN : Affiche les différences de reliefs (montagnes, rivières, etc.)

Chargement asynchrone de l'API Google Maps

Généralement, l'API est chargée au démarrage de l'application. Cela peut occasionner un ralentissement du temps d'affichage de la page. Il est possible de charger l'API Google Maps en mode asynchrone, c'est-à-dire en différé; on utilise pour cela le paramètre callback dans l'url qui appellera la fonction d'initialisation de la map.

function initialisation(){
var maLatlng = new google.maps.LatLng(48.8695490, 2.3513734);
var mesOptions = {
 zoom: 8,
 center: maLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP 
}
var carte = new google.maps.Map(document.getElementById("map_canvas"), mesOptions);
}
// Création de la balise script pour inclure les fonctions de Google Maps dans notre application
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialisation";
document.body.appendChild(script);
}
// Au chargement de la page on appelle la fonction loadScript qui appelle la fonction initialisation() grâce au paramètre callback
window.onload = loadScript;

Gestion des évènements Google Maps

Il est possible de capturer un évènement sur un marqueur ou sur la map grâce à la méthode addListener(). Il existe différents types d'évènements simples :

'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout‘
zoom_changed

NOTE : Ces événements ressemblent à des événements DOM standard, mais ils font en réalité partie intégrante de l'API Google Maps.

Exemple :

var carte;
function initialisation(){
 // On rentre les coordonnées(latitude, longitude) de notre choix dans une variable
 var maLatlng = new google.maps.LatLng(-25.363882,131.044922);
 // On établie les options de notre choix : la profondeur du zoom, les coordonnées sur lesquelles la carte sera centrée, le type de vue (satellite, plan ...)
 var mesOptions = {
     zoom: 4,
     center: maLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 }
 // On crée notre carte en lui passant toutes nos options en paramètre
 carte = new google.maps.Map(document.getElementById("map_canvas"), mesOptions);
 
 // On place un listener sur la carte qui contrôle une action qui sera déclenchée lors de l‘évènement 'zoom_changed'
 // Quand le zoom sera modifié la carte sera recentrée sur les coordonnées de The Coding Machine
 google.maps.event.addListener(carte,'zoom_changed‘, function() {
     setTimeout(allerChezTCM,3000);
 });
 
 // On crée un marqueur que l'on positionne grâce au paramètre "position"
 var marker = new google.maps.Marker ({
     position:maLatlng,
     map: carte,
     title: "Hello world :) !"
 });
 
 // On place un listener sur le marqueur qui contrôle une action qui sera déclenchée lors de l‘évènement ‘click'
 // Quand on clique sur le marqueur, le zoom de la carte passera à 8
 google.maps.event.addListener(marker, 'click', function(){
     carte.setZoom(8);
 });
}
function allerChezTCM() {
 var tcm = new google.maps.Latlng(48.8695490, 2.3513734);
 map.setCenter(tcm);
}

Les contrôles Google Maps

Il est possible d'activer ou de désactiver un contrôle en changeant la valeur de sa propriété à 'true' ou 'false' :

{
panControl: boolean,
zoomControl: boolean, 
mapTypeControl: boolean, 
scaleControl: boolean, 
streetViewControl: boolean, 
overviewMapControl: boolean
}

On peut également modifier les options d’un contrôle (position et style)

zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE, 
position: google.maps.ControlPosition.LEFT_CENTER
},

En voici quelques exemples :

ZoomControlStyle.LARGE : Zoom standard avec le slider
ZoomControlStyle.SMALL : Affiche un mini zoom avec juste les icônes + et -
ZoomControlStyle.DEFAULT : Choisi le bon format de zoom en fonction de taille de la carte et si on est sur un appareil mobile ou non
MapTypeControlStyle.HORIZONTAL_BAR : Affiche une barre horizontale pour la sélection du type d'affichage de map
MapTypeControlStyle.DROPDOWN_MENU : Permet de choisir le type de map (plan, satellite, terrain, hybrid) via une liste déroulante
MapTypeControlStyle.DEFAULT : Comportement par défaut, dépend de la taille de l’écran

Exemple de configuration d'un contrôle :

//On établie une liste déroulante pour le contrôle MapType  et on spécifie que le Zoom control  utilise un mini-zoom
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

Voici toutes les positions possibles d'un contrôle sur une map

les différentes positions possible d'un contrôle sur une map

Les marqueurs Google Maps

Voici comment créer un marqueur simple avec un contenu info bulle HTML:

function initialize() {
var maLatlng = new google.maps.LatLng(48.8695490, 2.3513734);
var mesOptions = {
	zoom: 4,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
  }
var carte = new google.maps.Map(document.getElementById("map_canvas"), mesOptions);
var image = 'beachflag.png';
// Instanciation de notre marqueur
var marker = new google.maps.Marker({
	position: maLatLng,
	map: carte,
	icon: image
});
	var message = "Vous êtes ici !";
	var infowindow = new google.maps.InfoWindow(
	{ content: message,
	  size: new google.maps.Size(50,50)
	})
google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(carte,marker);
  });
}

NOTE : Les marqueurs sont personalisables à l'aide de la propriété 'icon', il suffit de lui passer une image en paramètre.

En bonus il est possible d'ajouter une animation aux marqueurs en appelant la méthode setAnimation() sur l'objet 'marker'. Deux types sont possibles :

DROP : indique que ce marqueur devrait tomber du haut de la carte jusqu’à son emplacement définitif quand il est affiché sur la carte la première fois. L’animation cesse une fois que le curseur est en place. Ce type d'animation est généralement spécifié lors de la création du marqueur.
BOUNCE : Indique que le marqueur doit remuer. Un marqueur de ce type va continuer de bouger jusqu’à ce que sa propriété soit explicitement désactivée (= null).

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var tcm = new google.maps.LatLng(48.8695490, 2.3513734);
var marker;
var map; 
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
}; 
map = new google.maps.Map(document.getElementById("map_canvas"),
  mapOptions); 
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: tcm
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
 
function toggleBounce() {
 
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}

Utiliser la géolocalisation

// On test tout d'abord si le navigateur prend en charge la géocalisation HTML 5
if (navigator.geolocation)
	var watchId = navigator.geolocation.watchPosition(
		successCallback,
		null,
		{enableHighAccuracy:true}
	);
else
	alert("Votre navigateur n'est pas compatible avec la géocalisation HTML 5");
 
function successCallback(position){
	map.panTo(new google.maps.Latlng(position.coords.latitude, position.coords.longitude));
	var marker = new google.maps.Marker({
		position: new google.maps.Latlng(position.coords.latitude, position.coords.longitude),
		map: map
	});
}

A chaque déplacement un nouveau marqueur est placé, dans le cas d'une perte de signal le marqueur se positionne au relais 3G le plus proche.
Pour contourner le problème on utilise la propriété 'accuracy'.

Exemple: if(position.coords.accuracy < 100) { ... }

Utilisation de la librairie Geometry pour le calcul de distance

Tout ce que vous avez à faire est inclure la librairie Geometry lors de l'intégration de l'API à l'application puis appeler la méthode computeDistanceBetween() et lui passer deux objets LatLng en paramètre.

var nyc = new google.maps.LatLng(40.715, -74.002); 
var london = new google.maps.LatLng(51.506, -0.119); 
var distance = google.maps.geometry.spherical.computeDistanceBetween(nyc, london);

Bookmark/Search this post with: