Google Maps Javascript API (Partie 2)
Deuxième partie de l'article consacré à l'API Google Maps.
Nous allons voir dans cette partie :
Les fenêtres d’information.
Les marqueurs.
La création de contrôles
Pot pourri de fonctions et classes de l'API.
|
|
Vu
18180
fois
|
Dans cette seconde partie de l'article, j'estime que vous avez déjà lu et assimilé la 1ère partie de celui ci.
Ouvrir une fenêtre d’information
Il existe plusieurs types de fenêtres mis à notre disposition :
Nous utiliserons la méthode GMap2.openInfoWindowHtml() qui prend deux paramètres, le premier est un objet GLatLng qui sont les coordonnées pour centrer la fenêtre, le second est le code Html ou la chaîne de caractères qui apparaîtra comme contenu.
map.openInfoWindowHtml( new GLatLng(48.85861640881589, 2.3459243774414062), "<a href=´http://www.paris.fr´>Accédez au site de la Mairie</a>"); |
Ici, la méthode GMap2.openInfoWindowTabHtml () qui prend deux paramètres, le premier est un objet GLatLng qui représente les coordonnées pour centrer la fenêtre, le second est un tableau de n GInfoWindowTab. Les objets GInfoWindowTab prennent deux paramètres, le premier est le label de l’onglet, le second est le code HTML ou le texte constituant le contenu.
//InfoWindowTabs
var onglets = new Array();
var ongletInfosMairie = new GInfoWindowTab ("Infos Mairie", "<table><tr><td>Téléphone : </td><td>0110101010</td></tr><tr><td colspan="2"><a href="http://www.paris.fr">Accédez au site de la Mairie de Paris</a></td></tr></table>");
var ongletRecherche = new GInfoWindowTab ("Recherche", "<table><tr><td>Mots à rechercher </td><td><input type="text" /></td></tr><tr><td colspan="2"><input type="submit" value="Rechercher"></td></tr></table>");
onglets[0] = ongletInfosMairie;
onglets[1] = ongletRecherche;
map.openInfoWindowTabsHtml(new GLatLng(48.85861640881589, 2.3459243774414062), onglets); |
Pour compléter notre tour d’horizon des fenêtres d’informations, nous allons utiliser la classe GInfoWindowOptions. Les méthodes openInfoWindow(), openInfoWindowHtml(), openInfoWindowTabs, openInfoWindowTabsHtml prennent toutes un troisième paramètre optionnel sous forme d’un tableau d’objets GInfoWindowOptions.
Vous avez à votre disposition des options comme (voir plus d’options dans la documentation officielle) :
- selectedTab : un nombre indiquant l’index de l’onglet sélectionné par défaut.
- maxWidth : la largeur maximum de la fenêtre en pixels.
- onOpenFn : le nom de la fonction à appeler à l’ouverture de la fenêtre.
- onOpenFn : le nom de la fonction à appeler à l’ouverture de la fenêtre.
Prenons pour exemple ces deux fonctions :
function tracerEvenementOnOpenFn()
{
alert("onOpenFn");
}
function tracerEvenementOnCloseFn()
{
alert("onCloseFn");
}
|
Puis intégrons les options à notre code :
//InfoWindowTabs
var onglets = new Array();
var ongletInfosMairie = new GInfoWindowTab ("Infos Mairie", "<table><tr><td>Téléphone : </td><td>0110101010</td></tr><tr><td colspan="2"><a href="http://www.paris.fr">Accédez au site de la Mairie</a></td></tr></table>");
var ongletRecherche = new GInfoWindowTab ("Recherche", "<table><tr><td>Mots à rechercher </td><td><input type="text" /></td></tr><tr><td colspan="2"><input type="submit" value="Rechercher"></td></tr></table>");
onglets[0] = ongletInfosMairie;
onglets[1] = ongletRecherche;
//InfoWindowOptions
var options = { maxWidth : 300,
selectedTab : 1,
onOpenFn : tracerEvenementOnOpenFn,onCloseFn : tracerEvenementOnCloseFn
};
map.openInfoWindowTabsHtml(new GLatLng(48.85861640881589, 2.3459243774414062), onglets, options); |
L’onglet "Recherche" est sélectionné par défaut, la fenêtre d’information fait 300 pixels de largeur, une messageBox est affichée à l’ouverture de la fenêtre et une autre à la fermeture.
Les marqueurs
Pour créer un marqueur, il faut utiliser l’objet GMarker. Celui-ci prend comme paramètre un point (GLatLng), il prend aussi un tableau d’options optionnel comme second paramètre.
Exemple :
//Création du marqueur au centre de la carte.
var point = map.getCenter();
var marqueur = new GMarker(point, {draggable: true});
// Ajoutons le marqueur à la carte.
map.addOverlay(marqueur);
|
Nous avons à notre disposition quelques options :
-
title : C’est en fait l’info bulle (ToolTip) qui s’affiche.
-
clickable : Booléen indiquant si le marqueur est cliquable, la valeur par défaut est true.
-
draggable : Booléen indiquant si le marqueur est déplaçable, la valeur par défaut est false.
-
bouncy : Booléen indiquant si le marqueur rebondit lorsqu’on arrête de le déplacer, la valeur par défaut est false.
-
bounceGravity : Entier indiquant la vitesse à laquelle marqueur rebondit, la valeur par défaut est 1.
Nous avons ensuite la possibilité de rendre notre marqueur déplaçable (drag and Drop) et de s’abonner à ses deux évènements qui sont dragstart et dragend:
//Création du marqueur au centre de la carte.
var point = map.getCenter();
var marqueur = new GMarker(point, {draggable: true});
// Abonnons les deux évènements
// en affichant un message lorsque ceux ci se déclenchent.
GEvent.addListener(marqueur, "dragstart", function() {
//Action(s)
}
);
GEvent.addListener(marqueur, "dragend", function() {
//Action(s)
}
);
// Ajoutons le marqueur à la carte.
map.addOverlay(marqueur); |
Enfin, nous pouvons afficher une fenêtre d’information lors du click sur le marqueur.
GEvent.addListener(marqueur, "click", function()
{
marqueur.openInfoWindowHtml("<b>Marqueur</b><br><InfoWindowHtml>");
}
); |
La personnalisation et création de contrôles
Nous allons voir comment procéder pour personnaliser les marqueurs avec un icône de notre choix. Pour l’exemple, nous utiliserons les icônes mis à disposition par Google. Pour créer le marqueur personnalisé, il suffit de lui passer un objet GIcon comme second paramètre. La classe GIcon possède des propriétés liées à :
-
l’apparence et les coordonnées de l’icône (image, iconSize, iconAnchor, infoWindowAnchor)
-
l’apparence et les coordonnées de l’ombre de l’icône (shadow, shadowSize)
//Création d´un icone personnalisé.
var icone = new GIcon();
icone.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icone.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icone.iconSize = new GSize(12, 20);
icone.shadowSize = new GSize(22, 20);
icone.iconAnchor = new GPoint(6, 20);
icone.infoWindowAnchor = new GPoint(5, 1);
//Création du marqueur au centre de la carte.
var point = map.getCenter();
var marqueur = new GMarker(point, icone);
map.addOverlay(marqueur);
|
Nous pouvons aussi créer notre propre contrôle à l’aide de la classe GControl.
//Contrôle personnalisé.
function TextualZoomControl(){}
//Création du contrôle.
TextualZoomControl.prototype = new GControl();
//Fonction d´initialisation.
TextualZoomControl.prototype.initialize =
function(map)
{
//Création du container
var container = document.createElement("div");
//Création de la zone de zoom +
var zoomInDiv = document.createElement("div");
zoomInDiv.appendChild(document.createTextNode("Zoom +"));
//On applique le style
this.setButtonStyle_(zoomInDiv);
//On ajoute la zone au container
container.appendChild(zoomInDiv);
//On abonne le click sur la zone.
GEvent.addDomListener(zoomInDiv, "click", function(){map.zoomIn();});
//Création de la zone de zoom -
var zoomOutDiv = document.createElement("div");
zoomOutDiv.appendChild(document.createTextNode("Zoom -"));
//On applique le style
this.setButtonStyle_(zoomOutDiv);
//On ajoute la zone au container
container.appendChild(zoomOutDiv);
//On abonne le click sur la zone.
GEvent.addDomListener(zoomOutDiv, "click", function(){map.zoomOut();});
//Ajout du container au container de la carte.
map.getContainer().appendChild(container);
//On retourne le container pour que l´API puisse l´initialiser proprement.
return container;
}
// Fonction permettant de récupérer la position par défaut du contrôle.
TextualZoomControl.prototype.getDefaultPosition =
function()
{
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
//Fonction qui applique le style voulu au contrôle passé en paramètre.
TextualZoomControl.prototype.setButtonStyle_ = function(controle)
{
controle.style.textDecoration = "underline";
controle.style.color = "#0000cc";
controle.style.backgroundColor = "white";
controle.style.font = "small Arial";
controle.style.border = "1px solid black";
controle.style.padding = "2px";
controle.style.marginBottom = "3px";
controle.style.textAlign = "center";
controle.style.width = "6em";
controle.style.cursor = "pointer";
}
Voilà, nous avons créé un contrôle personnalisé. Il ne reste plus qu’à l’utiliser comme n’importe quel contrôle :
map.addControl(new TextualZoomControl()); |
Bien évidement, les contrôles que vous créez peuvent permettre n’importe quelle action, il ne s’agit pas uniquement de remplacer les contrôles existants. |
Pot pourri de fonctions et classes de l'API
Voici quelques fonctions de la classe GMap
// Déplace la carte vers le point.
map.panTo(new GLatLng(37.4569, -122.1569));
// Autorise le glisser déplacer sur la carte (option par défaut)
map.enableDragging() ;
// Interdit le glisser déplacer sur la carte
map.disableDragging() ;
// Autorise les fenêtres d’information (option par défaut)
map.enableInfoWindow() ;
// Interdit les fenêtres d’information
map.disableInfoWindow() ;
// Autorise le double click permettant de zoomer
map.enableDoubleClickZoom() ;
// Interdit le double click permettant de zoomer (option par défaut)
map.disableDoubleClickZoom() ;
|
Le Logger permet d’afficher dans une fenêtre (div), fort bien faîte, située en bas de la page les informations que vous désirez afficher. Elle s’avère très pratique pour débugger.
// Texte simple
GLog.write("Salut");
// Lien
GLog.writeUrl("http://www.google.com");
// HTML
GLog.writeHtml("<input type="text">");
|
Conclusion
Notre tour d’horizon de l’API Google Maps est terminé, je vous conseille pour une utilisation avancée de vous référer à la documentation officielle. De plus, certaines fonctions peuvent devenir obsolète si Google met à disposition de nouvelles versions de son API.
 |
|
Publié le
29/10/2006
|
|
Auteur:
SYL#
|
|
|