Contrôles d'affichage personnalisés sur les cartes GMaps

Cet exemple est propulsé par

Si vous suivez la présentation de la librairie GMaps dans l'ordre proposé par ce site Webjax, vous devez être familiarisé avec le placement et l'utilisation de contrôles d'affichage sur les cartes GMaps (GSmallTypeControl , GMapTypeControl).
Si vous n'avez pas encore pris connaissance du contenu Webjax portant sur ce sujet vous pouvez consulter la page #142 de Webjax qui vous montre comment ajouter dans des cartes GMaps des contrôles d'affichage.

Si vous êtes au fait avec les contrôles d'affichage des cartes GMaps vous pouvez continuer la lecture de cette page ;-)
Cette page vous présente les méthodes à votre disposition pour personnaliser ces dits contrôles d'affichage.

La personnalisation d'éléments d'interface apparaît essentielle dans certains sites au design précis ou dans des contextes d'utilisation dite "commerciale" ou l'on se doit par exemple de faire apparaître le logo de l'entité professionelle.


Afin de comprendre et de tirer au mieux profit de cet exemple vous devez être familier de la mise en forme CSS, du langage et de la conception objet à travers Javascript.

#00 :: Création d'un contrôle de Zoom +/- personnalisé

Création d'un contrôle de Zoom +/- personnalisé

Ce premier exemple vous présente la création d'un contrôle d'affichage personnalisé de cartes GMaps.
Le contrôle en question permet de réaliser des "zoom in" (+) ou des "zoom out" (-) sur une carte GMaps qui comme dans la plupart des exemples n'est pas déplaçable pour des raisons d'utilisation de mémoire.

On peut noter avant de rentrer dans le détail technique de l'exemple que le contrôle qui sera crée existe de base dans la librairie GMaps et se nomme 'GSmallZoomControl'.

Le code présenté plus bas consiste donc à définir un nouveau contrôle en tant qu'objet Javascript.
A travers la définition du prototype de ce nouvel objet Javascript qui est basé sur l'objet GControl , on est amené à redéfinir certains méthodes de cet objet.
Les méthodes redéfinies sont listées ci après :

• GControl.initialize() : on effectue lors de cette méthode la création de deux éléments 'div' contenant une node texte (ndr : message du bouton).
  Les nodes textes sont groupées au sein d'un élément 'div' container qui est ajouté via les méthodes DOM à l'élément container de la carte GMaps.
  On peut noter aussi que l'on assigne lors de l'évènement "onclick" sur les zones 'div'/boutons les méthodes de "GMaps2.zoomIn()" et "GMaps2.zoomOut()" pour donner la fonctionnalité aux boutons/zones 'div' crées .
• GControl.getDefaultPosition() : méthode qui de base permet de définir la position par défaut du contrôle.
  Cette méthode est redéfinie dans l'exemple pour afficher le contrôle 'controlZoomTexte' à partir du coin supérieur droit avec un padding de 7px.
• GControl.appliquerStyleBouton_() : méthode qui n'est pas présente de base dans GControl.
  Cette méthode est définie pour l'occasion pour optimiser la mise en forme des zones 'div' de "boutons zoom".
  La méthode reçoit un élément et le met en forme via CSS/Javascript/DOM.

L'exemple de création de contrôles d'affichage personnalisés de cartes GMaps est testable ci après :

Utilisation de l'exemple #00

ZONE DE CHARGEMENT DE LA CARTE GMAPS

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

• le code Javascript qui définit le nouvel objet controlZoomTexte et les méthodes de chargement de la carte et du contrôle d'affichage.
• le code HTML des boutons d'actions permettant le chargement de la carte.

var map = null; // ce contrôle 'controlZoomTexte' est un contrôle // similaire en termes de fonctionnalités au contrôle // GSmallZoomControl mais qui affiche des zones 'div' // texte en lieu et place des icônes de GSZC() function controlZoomTexte() { } controlZoomTexte.prototype = new GControl(); // définition de la méthode d'initialisation du nouvel // objet => création d'un élément 'div' container contenant // deux éléments 'div' auquels on accroche "onclick" // la fonctionnalité de zoomer la carte GMaps courante controlZoomTexte.prototype.initialize = function(map) { var container = document.createElement("div"); var zoomInDiv = document.createElement("div"); this.appliquerStyleBouton_(zoomInDiv); container.appendChild(zoomInDiv); zoomInDiv.appendChild(document.createTextNode("Zoom (+)")); GEvent.addDomListener(zoomInDiv, "click", function() { map.zoomIn(); }); var zoomOutDiv = document.createElement("div"); this.appliquerStyleBouton_(zoomOutDiv); container.appendChild(zoomOutDiv); zoomOutDiv.appendChild(document.createTextNode("Zoom (-)")); GEvent.addDomListener(zoomOutDiv, "click", function() { map.zoomOut(); }); map.getContainer().appendChild(container); return container; } // définition du positionnement par défaut du contrôle défini controlZoomTexte.prototype.getDefaultPosition = function() { return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7)); } // méthode de mise en forme CSS des boutons/éléments 'div' // utilisés pour zoomer la carte controlZoomTexte.prototype.appliquerStyleBouton_ = function(button) { button.style.textDecoration = "underline"; button.style.color = "#232323"; button.style.backgroundColor = "#FAFAFA"; button.style.font = "small verdana"; button.style.border = "2px dashed #121212"; button.style.padding = "2px"; button.style.marginBottom = "3px"; button.style.textAlign = "center"; button.style.width = "6em"; button.style.cursor = "pointer"; } // chargement de la carte (optimisation ressources GMaps) function chargerCarte () { map = new GMap2(document.getElementById("map_0")); map.disableDragging(); map.setCenter(new GLatLng(48.8755, 2.3255), 13); } // fonction de création du contrôle à partir de // l'objet défini plus controlZoomTexte function chargerControlZoomTexte() { map.addControl(new controlZoomTexte()); }
Le code HTML des boutons d'action :
<!-- code HTML des boutons d'actions --> <input type="button" id="ok_0" value="charger la carte (1ere étape du test)" onClick="chargerCarte(); $('ok_1').disabled = false; this.disabled = true;" /> <input type="button" id="ok_1" value="charger le contrôle de zoom texte" disabled="true" onClick="chargerControlZoomTexte(); " />

: 30/01/2007 15:59:25 | : Google, Maps, GMaps, GControl, personnalisation, contrôles, affichage, marker, xml, cartes, cartographie, géolocalisation, marqueurs,

Aucun commentaire enregistré