Ajout de contrôles aux cartes GMaps

Cet exemple est propulsé par

Si vous avez pris connaissance de la page #140 de Webjax présentant les fonctionnalités de base d'une carte GMaps vous devez vous demander comment ajouter des contrôles d'affichage sur les cartes afin de pouvoir proposer une visualisation de carte adaptée à ce que vous souhaitez créer.

Cette page vous permet de prendre connaissance des méthodes à utiliser pour ajouter des contrôles d'affichage sur les cartes GMaps.
L'ajout peut se fait au chargement de la carte ou bien au fur et à mesure comme vous pourrez le voir au cours des exemples de cette page.

Exemple simple d'ajouts de contrôles d'affichage Exemple personnalisé d'ajouts de contrôles d'affichage Placement personnalisé des contrôles d'affichage

Exemple simple d'ajouts de contrôles d'affichage

Ce premier exemple vous présente l'ajout simple de contrôles sur une carte GMaps.
Les méthodes utilisée est GMap2.addControl() à laquelle on transmet un objet du type de contrôle à ajouter.
Dans l'exemple l'objet GSmallMapControl() permet d'ajouter un cadre permettant de se déplacer rapidement dans la zone de carte que l'on visualise.
Dans ce même exemple l'objet GMapTypeControl() permet d'ajouter des boutons permettant de changer de mode d'affichage de la carte (NORMAL, SATELITTE, HYBRID).

L'exemple est testable ci après sans paramétrage préalable :

Utilisation de l'exemple #00

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Le code source de l'exemple est recopié ci après avec dans l'ordre :

• le code javascript permettant de créer une carte avec des contrôles d'affichage
• le code html du bouton d'action permettant le chargement de la carte

/* fonction de chargement de la carte avec contrôles */ function chargerCarteAvecControls () { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_0")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(48.856558, 2.350966), 12); } }
Le code HTML du bouton d'action :
/* code HTML du bouton d'action */ <input type="button" name="ok_0" value="charger la carte centrée sur Paris avec les contrôles d'affichage" onClick="chargerCarteAvecControls();" />

Exemple personnalisé d'ajouts de contrôles d'affichage

Ce second exemple vous permet d'ajouter à votre guise les contrôles d'affichage sur une carte GMaps.
Cet exemple est ici pour démontrer la forte capacité d'adaptation de la classe aux différents besoins des utilisateurs finaux des GMaps.

L'exemple est testable ci après :

Utilisation de l'exemple #01

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Type de contrôle :
Contrôle de zoom + directions (GSmallMapControl) Contrôle de zoom + directions + slider (GLargeMapControl) Contrôle de type d'affichage/vue (GMapTypeControl) Contrôle d'échelle de la carte (GScaleControl) Contrôle de zoom +/- (GSmallZoomControl)

Le code source de l'exemple est repris ci après :
var map = null; var smallMapControl = null; var largeMapControl = null; var viewControl = null; var scaleControl = null; var smallZoomControl = null; if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_1")); map.disableDragging(); map.setCenter(new GLatLng(48.856558, 2.350966), 12); } /* fonction d'ajouts de contrôles sur la carte */ function ajouterControl (type) { if (type == "SMALLMAP") { smallMapControl = new GSmallMapControl(); map.addControl(smallMapControl); } else if (type == "LARGEMAP") { largeMapControl = new GLargeMapControl(); map.addControl(largeMapControl); } else if (type == "VIEW") { viewControl = new GMapTypeControl(); map.addControl(viewControl); } else if (type == "SCALE") { scaleControl = new GScaleControl(); map.addControl(scaleControl); } else if (type == "SMALLZOOM") { smallZoomControl = new GSmallZoomControl(); map.addControl(smallZoomControl); } } /* fonction de suppression de contrôles sur la carte */ function supprimerControl (type) { if (type == "SMALLMAP") { map.removeControl(smallMapControl); } else if (type == "LARGEMAP") { map.removeControl(largeMapControl); } else if (type == "VIEW") { map.removeControl(viewControl); } else if (type == "SCALE") { map.removeControl(scaleControl); } else if (type == "SMALLZOOM") { map.removeControl(smallZoomControl); } }
Le code html de la liste déroulante de choix et des boutons d'actions :
<!-- code html de la liste déroulante et des boutons d'actions --> Type de contrôle : <br/><select id="type_0"> <option value="SMALLMAP">Contrôle de zoom + directions (GSmallMapControl)</option> <option value="LARGEMAP">Contrôle de zoom + directions + slider (GLargeMapControl)</option> <option value="VIEW">Contrôle de type d'affichage/vue (GMapTypeControl)</option> <option value="SCALE">Contrôle d'échelle de la carte (GMapScaleControl)</option> <option value="SMALLZOOM">Contrôle de zoom +/- (GSmallZoomControl)</option> </select> <br/> <input type="button" name="ok_1" value="ajouter un contrôle sur la carte GMaps" onClick="ajouterControl($F('type_0'));" /> <br/> <input type="button" name="ok_2" value="supprimer un contrôle sur la carte GMaps" onClick="supprimerControl($F('type_0'));" />

Placement personnalisé des contrôles d'affichage

Ce troisième exemple vous montre comment déterminer le placement sur une carte GMaps d'un contrôle d'affichage.
4 placement sont définis par défaut sur les 4 coins de la carte.

L'exemple est testable ci après :

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Position du contrôle d'affichage : Coin supérieur droit (top-right) Coin supérieur gauche (top-left) Coin inférieur droit (bottom-right) Coin inférieur gauche (bottom-left)



Le code source de l'exemple est repris ci après avec dans l'ordre :

• le code javascript permettant d'initialiser la carte et définissant les méthodes d'ajouts de contrôles en fonction d'une position définie.
• le code HTML de la liste déroulante de position possible et des boutons d'action.

var map = null; var Control = null; var typeControl = [ "SMALLMAP", "LARGEMAP", "VIEW", "SCALE" , "SMALLZOOM"]; if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_2")); map.disableDragging(); map.setCenter(new GLatLng(48.856558, 2.350966), 12); } /* fonction d'ajouts de contrôles sur la carte */ function ajouterControlCustom (placement) { var i = Math.floor(typeControl.length*Math.random()); if (typeControl[i] == "SMALLMAP") Control = new GSmallMapControl(); else if (typeControl[i] == "LARGEMAP") Control = new GLargeMapControl(); else if (typeControl[i] == "VIEW") Control = new GMapTypeControl(); else if (typeControl[i] == "SCALE") Control = new GScaleControl(); else if (typeControl[i] == "SMALLZOOM") Control = new GSmallZoomControl(); // objet GSize permettant un padding par défaut // par rapport aux bordures de la carte var pad = new GSize(7,7); if (placement == "G_ANCHOR_TOP_RIGHT") map.addControl(Control,new GControlPosition(G_ANCHOR_TOP_RIGHT,pad)); else if (placement == "G_ANCHOR_TOP_LEFT") map.addControl(Control,new GControlPosition(G_ANCHOR_TOP_LEFT,pad)); else if (placement == "G_ANCHOR_BOTTOM_RIGHT") map.addControl(Control,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,pad)); else if (placement == "G_ANCHOR_BOTTOM_LEFT") map.addControl(Control,new GControlPosition(G_ANCHOR_BOTTOM_LEFT,pad)); } // fonction de suppression du contrôle événtuellement créé function supprimerControlCustom () { map.removeControl(Control); }
Le code HTML de la liste déroulante et des boutons d'actions :
<!-- liste déroulante et boutons d'actions --> Position du contrôle d'affichage : <select id="placement"> <option value="G_ANCHOR_TOP_RIGHT">Coin supérieur droit (top-right)</option> <option value="G_ANCHOR_TOP_LEFT">Coin supérieur gauche (top-left)</option> <option value="G_ANCHOR_BOTTOM_RIGHT">Coin inférieur droit (bottom-right)</option> <option value="G_ANCHOR_BOTTOM_LEFT">Coin inférieur gauche (bottom-left)</option> </select> <br/> <input type="button" name="ok_4" value="placer le contrôle d'affichage sur la carte" onClick="ajouterControlCustom($F('placement'));" /> <input type="button" name="ok_5" value="supprimer le contrôle d'affichage sur la carte" onClick="supprimerControlCustom();" />

: 27/01/2007 16:15:01 | : Google, Maps, GMaps, Contrôles, Affichage, Options, GMap2.addControl(), addControl, cartes, cartographie, géolocalisation, marqueurs,

Aucun commentaire enregistré