21
03 fév 2010


Introduction


L'API Google Maps v3 évolue.
Ce second tutoriel nous montrera les mécanismes mis en jeu pour afficher un marqueur, gérer un événement et optimiser l'affichage sur différents devices.
Le résultat sera d'ailleurs repris dans les tutoriaux sur les Webview sous iPhone et Android.

Initialisation


Comme nous l'avons vu dans le premier tutoriel sur la découverte de cette nouvelle mouture de l'API, la syntaxe est légèrement différente de la version 2. Elle repose désormais sur le concept MVC.
Tout d'abord instancions les variables :

var map;
var myOptions;

Puis initialisons la carte avec la fonction qui sera appelée à l'ouverture de la page :

function initialize() {

...

}

Définissons une coordonnées grâce à la classe LatLng

var myLatlng = new google.maps.LatLng(43.5777, 1.40283);

Les options


myOptions = {
zoom: 18,
center: myLatlng,
disableDefaultUI: true,
backgroundColor: '#efedbe',
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
mapTypeId: google.maps.MapTypeId.SATELLITE
};

Dans l'ordre :

  • zoom : le niveau de zoom au chargement de la carte,
  • center : le centre de la carte au chargement,
  • backgroundColor : la couleur du fond de carte en attendant les tuiles - couleur hexadécimale - il est pour le moment impossible de définir ses propres tuiles grâce à une URL,
  • mapTypeControl : pour définir ou non les contrôles de la carte
  • mapTypeControlOptions : définition des options contrôle - ici laissé en DEFAULT à l'initialisation,
  • navigationControl : pour définir ou non la navigation de la carte,
  • navigationControlOptions : définition des contrôles de navigation - ici laissé en DEFAULT à l'initialisation,
  • scaleControl : pour définir ou non une échelle,
  • scaleControlOptions : définition de la position de l'échelle - ici en bas à gauche,
  • mapTypeId : le style de carte au chargement - obligatoire.

Il existe de nombreuses autres options que je vous invite à découvrir sur la référence de l'API.

L'appel au constructeur

On définit maintenant la carte en précisant l'ID du div qui la contiendra et en liant les options précédemment définies :

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


Un marqueur et un événement


Définissons un marqueur :

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Marker !"
});

On constate qu'il n'est plus nécessaire comme dans l'API v2 de 'poser' le marqueur sur la carte. C'est fait directement.
On définit donc un titre, une position et la carte sur laquelle sera affiché le marqueur.

Puis on crée une infobulle qui s'affichera lors d'un clic sur le marqueur :

var infowindow = new google.maps.InfoWindow({
content: 'Infobulle'
});

Et on ajoute l'événement :

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});


Détection des devices


L'API v3 permet un affichage aussi bien sur les smartphones que sur les ordinateurs de bureau.
Voyons comment détecter le type de machine qui appelle la page Web et comment modifier les options en fonction de ce type.
Déclarons tout d'abord une fonction qui sera appelée à l'ouverture de la page :

function detectBrowser() {

...

}

Les variables

La détection de la plateforme qui charge la page se fait via la propriété navigator.useragent. Initialisons là et profitons de l'occasion pour déclarer le div qui contiendra la carte - nous pourrons ainsi changer la taille de ce cadre en fonction des devices :

var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");

Smartphone ou ordi

Il suffit maintenant de détecter un iPhone ou un Android et ajuster la taille du cadre et modifier un peu les options de la carte définies plus haut et initialisées pour un ordinateur :

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
myOptions = {
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ANDROID
},
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
disableDoubleClickZoom: true,
scaleControl: false
};
map.setOptions(myOptions);
} else {
mapdiv.style.width = '550px';
mapdiv.style.height = '350px';
}
}

Si il s'agit d'un smartphone, nous affichons la carte en pleine page - ie. height et width à 100%, nous modifions les contrôles de carte - sélection du type de vue dans un menu déroulant et affichage de deux boutons de zoom au 'style' Android, nous désactivons le zoom en double-cliquant et nous enlevons l'échelle.
Si il s'agit d'un ordinateur de bureau, nous définissons simplement la taille du cadre - ici 550px et 350px (parce que ça rentre pile-poil dans la démonstration (cf. sous le code complet)).

Et un peu d'HTML


Il faut définir maintenant le div qui contiendra la carte et appeler les deux fonctions lors du chargement de la page :



Vous voilà parés pour 'fabriquer' des cartes sur des smartphones et des ordinateurs de bureau sans avoir à faire deux pages différentes.

Code complet







[Google Maps API v3] 20. Construction d'une carte pour desktops et smartphones






Démonstration