24 aoû 2008


attention_light.jpgL'API Google Maps v2 est dépréciée depuis le 19 mai 2010.

Introduction


Il est parfois frustrant lorsqu'on utilise des API de ne pas pouvoir personnaliser complétement les contrôles et les événements. L'API Google Maps permet cette fonctionnalité. Nous verrons ici comment personnaliser ses propres contrôles de zoom, de déplacement et de sélection de couches.

Initialisation


Reprendre la carte du tutoriel n°1.

Création de la fonction zoom


La création de ses propres contrôles passe par la déclaration d'une fonction et de la déclaration d'un objet 'prototype' comme une instance de l'objet GControl() :

ZoomControl.prototype = new GControl();
ZoomControl.prototype = new GControl();

Puis par la création du 'container', des boutons et des événements :

function ZoomControl() {}
ZoomControl.prototype = new GControl();
ZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");

var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Zoom In"));
zoomInDiv.innerHTML = '';
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
});

map.getContainer().appendChild(container);
return container;
}


Positionnement du container


Il faut ensuite positionner le container par rapport aux bords de la carte :

ZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 5));
}


Ajout du contrôle


Il est maintenant nécessaire d'appeler cette fonction de zoom personnalisée :

map.addControl(new ZoomControl());


Paramétrage par défaut de la carte


La dernière étape est de définir un centre, un niveau de zoom et une couche par défaut à la carte :

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


Code complet






<br /> [Google Maps] 6. Personnaliser les contrôles<br />






Démonstration