20. [Google Maps API v3] Marqueur, événement et devices

Ecrit par fabien le 3/02/2010.

Sommaire

Introduction
Initialisation
1. Les options
2. L'appel au constructeur
Un marqueur et un événement
Détection des devices
1. Les variables
2. Smartphone ou ordi
Et un peu d'HTML
Code complet
Démonstration
Remarques
Conclusion

résumé:

L'API Google Maps v3 - encore dans le labs Google - est optimisée pour un affichage cartographique sur plusieurs supports, notamment les smartphones (iPhone et Android en tête).

pré-requis:

Avoir lu le tutoriel sur l'introduction à l'API Google Maps v3.

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 :

<body style="margin:0px; padding:0px;" onload="initialize(); detectBrowser();">
  <div id="map_canvas"></div>
</body>

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

<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>[Google Maps API v3] 20. Construction d'une carte pour desktops et smartphones</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  var map;
  var myOptions;
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(43.5777, 1.40283);
    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
    };
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: "Marker !"
    });
    var infowindow = new google.maps.InfoWindow({
      content: 'Infobulle'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map, marker);
    });
 
  }
 
  function detectBrowser() {
    var useragent = navigator.userAgent;
    var mapdiv = document.getElementById("map_canvas");
 
    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';
    }
  }
 
  </script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize(); detectBrowser();">
  <div id="map_canvas"></div>
</body>
</html>

Démonstration

A tester également sur votre smartphone !

Pour ceux qui n'ont pas de smartphone, voici une capture du rendu - vous noterez les différences de navigation et de contrôle :

Remarques

Toujours se référer à l'API Google Maps - Google Maps API Reference v3 pour les différentes classes, méthodes et options utilisées.
Je vous conseille également la lecture des exemples et des articles.

Conclusion

Cette nouvelle API permet d'afficher des cartes sur un ordinateur de bureau ou sur un smartphone.
Elle évolue vite. Le résultat de ce tutoriel sera utilisé dans les tutoriaux d'explication des webview sous iPhone et Android.

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

Retour en haut

Bonjour ! Je découvre avec

Par korr (non vérifié), le jeu, 03/11/2010 - 1:33am.

Bonjour !

Je découvre avec bcp de plaisir ce tuto ! j'utilisais l'autre méthode avec les key, mais trop de soucis....j'aimerais retrouver le meme resultat qu'avant
d'ou deux questions, comment changer l'icone d'un marqueur et son ombre
et comment faire pour que l'infobulle de ce seul et unique marqueur, soit ouvert dés le départ ?

Par avance, grand merci à vous !!!

répondre

Bonjour, Merci pour les

Par Planeteeco (non vérifié), le mer, 02/24/2010 - 11:44pm.

Bonjour,
Merci pour les informations. Je comprends mieux, et j'ai réalisé ma première carte.
J'ai réussi à placer un point avec son infobulle. J'ai réussi à placer une polyligne.
Mais je n'arrive pas à placer un second point (avec une autre infobulle).
C'est sans doute tout bête !?...
Pouvez-vous m'éclairer ? A quel endroit, et quel code utiliser ?
Merci pour votre aide.

répondre

Bonjour, en effet c'est

Par fabien, le ven, 02/26/2010 - 1:44pm.

Bonjour,
en effet c'est facile : il suffit de déclarer un second marqueur.

var marker2 = new google.maps.Marker({
  position: myLatlng2,
  map: map,
  title: "Marker 2!"
});

répondre

Merci pour la réponse. Je

Par Anonymous (non vérifié), le lun, 03/01/2010 - 12:10am.

Merci pour la réponse.
Je continue à avancer dans ma carte !

répondre

GeoTribu