Les méthodes liées aux états de la carte (map State) permettent de modifier ou d’agir sur la carte de votre application.
setCenter()
Signature de la méthode setCenter :
setCenter(center : GLatLng, zoom ? : nombre, type ? : GLatLng).
La méthode setCenter() affiche une carte centrée sur le point (center) passé en paramètre.
Les arguments zoom et type sont optionnels.
Si l’argument type est renseigné, la valeur passée en paramètre doit être connue de la carte; voir le constructeur et la méthode addMapType().
Cette méthode doit être appelée en premier après la construction de la carte pour lancer le chargement de l’état initial.
C’est une erreur que d’affecter des opérations sur une carte nouvellement créée après avoir invoqué cette méthode.
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
</script>
panTo()
Signature de la méthode panTo :
panTo(center : GLatLng).
La méthode panTo() change le centre de la carte en se rendant au point passé en paramètre.
Si ce point est déjà visible sur la vue en cours, la carte se déplace alors jusqu’à ce dernier.
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
GEvent.addListener(map, "click", function() {
map.panTo(new GLatLng(48.3906042, -4.4869013));
});
/* Nous ajoutons un écouteur d'événement sur la carte.
Lorsque l'utilisateur clique dessus, elle se déplace au point
passé en paramètre à la méthode panTo (en l'occurrence, Brest). */
</script>
panBy()
Signature de la méthode panBy :
panBy(distance : GSize).
La méthode panBy() permet de déplacer la carte pour une distance donnée en paramètre à l’aide de l’objet GSize.
Voir le système de coordonnées utilisé par Google Map.
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
GEvent.addListener(map, "click", function() {
map.panBy(new GSize(100, 0));
});
/* Nous ajoutons un écouteur d'événement sur la carte.
Lorsque l'utilisateur clique dessus, elle se déplace de 100 px
vers l'Ouest (vers la gauche). */
</script>
panDirection()
Signature de la méthode panDirection :
panDirection(dx : -1, 0 ou 1, dy : -1, 0 ou +1).
La méthode panDirection() permet de déplacer la carte d’une distance correspondant à la moitié de sa largeur. Les arguments dx et dy permettent quant à eux de préciser le sens du déplacement.
-1 : vers la gauche (dx) ou vers la haut (dy)
0 : aucun
+1 : vers la droite (dx) ou vers le bas (dy)
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
GEvent.addListener(map, "click", function() {
map.panDirection(-1, 0);
});
/* Nous ajoutons un écouteur d'événement sur la carte.
Lorsque l'utilisateur clique dessus, elle se déplace vers l'Est (vers la droite). */
</script>
setZoom()
Signature de la méthode setZoom :
setZoom(niveau : nombre).
La méthode setZoom() permet de spécifier un nouveau niveau de zoom pour la carte.
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
map.setZoom(5);
/* Dans cet exemple, nous redéclarons le zoom
appliqué à la carte avec la valeur 5.
Elle s'affichera donc avec un niveau de zoom égal à 5 et non à 13. */
</script>
zoomIn()
Signature de la méthode zoomIn :
zoomIn(latlng ? : GLatLng, centrer ? : booléen, appliquer un zoom progressif ? : Booléen ).
La méthode zoomIn() incrémente le niveau de zoom en cours d’un niveau. Si un argument latlng est fourni, la carte effectuera le zoom de manière à ce que ce point reste visible sur la nouvelle vue (mais pas forcément centré).
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
GEvent.addListener(map, "click", function() {
map.zoomIn(new GLatLng(50.6371834, 3.0630174), true);
});
/* Nous ajoutons un écouteur d'événement sur la carte.
Lorsque l'utilisateur clique dessus, celle-ci effectue un zoom +
en centrant la carte (centrer passé à true) sur le point
passé en paramètre (ici, Lille). */
</script>
zoomOut()
Signature de la méthode zoomOut :
zoomOut(latlng ? : GLatLng, appliquer un zoom progressif ? : Booléen ).
La méthode zoomOut() décrémente le niveau de zoom en cours d’un niveau. Si un argument latlng est fourni, le zoom (négatif) s’effectuera autour de ce point.
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
GEvent.addListener(map, "click", function() {
map.zoomOut(new GLatLng(50.6371834, 3.0630174));
});
/* Nous ajoutons un écouteur d'événement sur la carte.
Lorsque l'utilisateur clique dessus, celle-ci effectue un zoom -
autour du point passé en paramètre (ici, Lille). */
</script>
savePosition()
Signature de la méthode savePosition :
savePosition().
La méthode savePosition() conserve en mémoire la position courante de la carte avec le zoom associé. Il sera ainsi possible d’y revenir en utlisant la méthode returnToSavedPosition().
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
GEvent.addListener(map, "click", function() {
map.savePosition();
});
/* Nous ajoutons un écouteur d'événement sur la carte.
Lorsque l'utilisateur clique dessus, la position en cours
est conservée en mémoire. */
</script>
returnToSavedPosition()
Signature de la méthode returnToSavedPosition :
returnToSavedPosition().
La méthode returnToSavedPosition() permet de revenir à une vue sauvegardée à l’aide de la méthode savePosition().
<script type="text/javascript">
var map = new GMap2(document.getElementById('map'));
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
map.setCenter(new GLatLng(48.8566667, 2.3509871), 13);
/* Ici, nous affichons une carte centrée sur Paris.
Le zoom appliqué vaudra 13. */
GEvent.addListener(map, "click", function() {
map.savePosition();
});
GEvent.addListener(map, "dragend", function() {
map.returnToSavedPosition();
});
/* Nous ajoutons 2 écouteurs d'événement sur la carte.
Quand l'utilisateur clique dessus, la position est stockée en mémoire.
Lorsqu'il relâche la carte, celle-ci revient automatiquement
à la position sauvegardée via la méthode savePosition(). */
</script>
checkResize()
Signature de la méthode checkResize :
checkResize().
La méthode checkResize() notifie à la carte un changement de taille de son conteneur. Il peut être utile de faire appel à cette méthode lorsque les dimensions du DIV (généralement) contenant la carte ont été modifiées.
La carte pourra alors s’ajuster automatiquement à ces nouvelles dimensions.
