Types de cartes disponibles

En standard, l'API Google Map V3 vous propose quatre types de cartes. Chacun de ces types est définit par google.maps.MapTypeId.TYPE_DE_CARTE. Voici la liste complète de ces types de cartes :

  • MapTypeId.ROADMAP vue carte routière par défaut,
  • MapTypeId.SATELLITE vue satellite,
  • MapTypeId.HYBRID vue hybride : combinaison des vues carte routière et satellite,
  • MapTypeId.TERRAIN vue relief.

Afin que vous puissiez bien voir la différence entre ces différents types de terrains, je vous ais préparé un exemple pour chacun d'entre eux :

Type de carte par défaut

Retournons maintenant au code de construction d'une carte Google Map. Si vous êtes perdu, je vous invite à aller consulter le billet de découverte de l'API qui vous permettra de créer votre première carte.

// Point sur lequel est centré la carte
var myLatlng = new google.maps.LatLng(0, 0);
 
// Options de la carte
var myOptions = {
	zoom: 8,
	center: myLatlng,
        // Nous indiquons ici le type de carte à afficher par défaut :
	mapTypeId: google.maps.MapTypeId.TERRAIN
};
 
// Création de la carte
var myMap = new google.maps.Map(
	document.getElementById('map'),
	myOptions
);

Je dois admettre que nous avions déjà plus ou moins abordé ce point dans un précédent billet. C'est pourquoi je vais aller un peu plus loin cette fois-ci.

Contrôlez le choix de l'utilisateur

Dans les options de création de votre carte, il en existe une que nous n'avons pas encore abordé : mapTypeControlOptions. Cette option est un objet statique et admet les sous options suivantes :

  • mapTypeIds, un tableau contenant les identifiants de types de cartes disponibles,
  • style qui définit l'apparence du sélecteur de type de map.

L'option style peut prendre trois valeurs différentes :

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  • google.maps.MapTypeControlStyle.DEFAULT qui affiche le système de sélection par défaut, dépendant de l'espace disponible et susceptible de changer dans les futures version de l'API.

Je vous propose donc maintenant de créer une carte proposant les vues hybride et relief dans un DROPDOWN_MENU :

// Point sur lequel est centré la carte
var myLatlng = new google.maps.LatLng(0, 0);
 
// Options de la carte
var myOptions = {
	zoom: 3,
	center: myLatlng,
        // Nous indiquons ici le type de carte à afficher par défaut :
	mapTypeId: google.maps.MapTypeId.HYBRID,
        // Personnalisation du sélecteur
        mapTypeControlOptions : {
          // Liste des types autorisés
          mapTypeIds : [ google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN],
          // Apparence du sélecteur
          style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
};
 
// Création de la carte
var myMap = new google.maps.Map(
	document.getElementById('map'),
	myOptions
);

Vous pouvez consulter le rendu de cette exemple.

Conclusion

Ce billet est là pour ouvrir la porte aux cartes complètement personnalisées ! Je travail actuellement sur un billet pour vous expliquer comment exploiter les images fournies pas Google pour afficher des cartes de la Lune. Vous comprendrez alors qu'il est possible de réaliser des cartes de tout ce que vous voulez. En attendant, je vous propose de consulter le rendu de cette carte "multisurface", dont vous pouvez déjà consulter le code source pour essayer de le comprendre.

<< Sommaire des articles Google Map API V3