Pour ajouter un marqueur à une carte, c'est simplissime :
- on crée un point en utilisant GLatLng(), qui nous est familière puisque nous l'utilisons pour le centrage de la carte.
- on en fait un marqueur
- on l'ajoute à la carte :
var point = new GLatLng(48.9908338,1.717222); var marker = new GMarker(point); map.addOverlay(marker);
ou si on veut faire court
map.addOverlay(new GMarker(GLatLng(48.9908338,1.717222)));
On peut ajouter autant de marqueurs qu'on veut. Cet exemple affiche quatre marqueurs
Marqueurs personnalisés
On en a vite assez de cette bulle rouge. D'autant que, pour qui n'a jamais visité l'Islande, trouver quel marqueur correspond à quel site n'est pas évident... Heureusement, il est possible de définir une icône et de l'appliquer à un marqueur.
Définissons d'abord l'icône : pour faire simple, on va récupérer les réglages de l'icône par défaut, et indiquer un nouveau fichier image, mis à notre disposition par Google :
var blueIcon = new GIcon(G_DEFAULT_ICON); blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
Lors de la création du marqueur, nous spécifions cette icône qui vient remplacer l'icône par défaut dans les options de réglage du marqueur :
var reykjavik = new GLatLng(64.135338, -21.89521) ; map.addOverlay(new GMarker(reykjavik, blueIcon));
Redéfinir complètement une icône
Il est également possible de redéfinir complètement une icône (par exemple de taille différente). On doit alors renseigner ses différents réglages : indiquer sa taille, la taille de son ombre,
var redicon = new GIcon(); redicon.iconSize=new GSize(12,20); redicon.shadowSize=new GSize(20,22);
son point d'accroche ainsi que celui de sa fenêtre d'information.
redicon.iconAnchor=new GPoint(6,20); redicon.infoWindowAnchor=new GPoint(5,1);
Enfin on définit les fichiers image utilisés pour l'apparence de l'icône et pour son ombre. Notre icone etant plus petite que celle par defaut, il nous faut en effet une ombre "sur mesure". On utilise pour l'instant les fichiers mis à notre disposition par Google :
redicon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; redicon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
Spécifier une option à la création du marqueur
Nous avons défini une icône en forme de petite bulle rouge. Pour l'appliquer au marqueur, nous pouvons faire comme ci-dessus. Nous pouvons aussi utiliser un objet GMarkerOptions, dans lequel nous attribuons notre icône à l'option icon, pour donc à nouveau remplacer l'icône par défaut. C'est cet objet que nous donnons en deuxième argument à la création de notre marqueur.
var geysir = new GLatLng(64.27951, -20.36138) ;
markerOptions = { icon:redicon }; // Set up our GMarkerOptions object
map.addOverlay(new GMarker(geysir, redicon));
L'utilisation de l'objet GMarkerOptions nous permet également de spécifier d'autres options du marqueur. Nous découvrirons celles-ci au fur et à mesure de nos besoins.
Google nous propose diverses couleurs d'icônes, que nous pouvons utiliser pour différencier nos points, ou comme dans cet exemple, pour mettre en valeur différents thèmes dans un ensemble de nombreux points.
Il suffit pour cela de déclarer de nouvelles icônes en réutilisant la précédente pour garder nos réglages, sauf en ce qui concerne l'image, dont nous spécifions la nouvelle valeur :
// declinaisons colorées var greenicon = new GIcon(redicon, 'http://labs.google.com/ridefinder/images/mm_20_green.png', null, null); var blueicon = new GIcon(redicon, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', null, null); var orangeicon = new GIcon(redicon, 'http://labs.google.com/ridefinder/images/mm_20_orange.png', null, null); var yellowicon = new GIcon(redicon, 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', null, null); var purpleicon = new GIcon(redicon, 'http://labs.google.com/ridefinder/images/mm_20_purple.png', null, null);
Le manager de marqueurs
Pour la création des deux derniers marqueurs, nous décidons d'utiliser le MarkerManager. Ce manager permet d'ajouter à une carte de nombreux marqueurs à la fois, et évite donc des appels multiples à la méthode addOverlay.
Le manager est défini dans une librairie de Google, qu'il nous faut donc d'abord inclure, juste après le script comprenant notre clé :
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>
Nous allons tout d'abord créer un tableau de marqueurs. Notre tableau comprend ici deux marqueurs, chacun avec une icône différente.
var batch = [];
var icons = [ orangeicon, purpleicon ] ;
var coordinates = [ new GLatLng(65.683868, -18.11046), new GLatLng(64.35,-16.58) ] ;
for (var i = 0; i < 2; ++i) {
batch.push(new GMarker(coordinates[i], {icon: icons[i] } ) ) ;
}
Puis nous définissons le manager de marqueurs en lui donnant notre carte comme paramètre
var mgr = new MarkerManager(map);
Nous lui ajoutons notre tableau de marqueurs, et nous rafraîchissons l'affichage.
mgr.addMarkers(batch, 4) ; mgr.refresh();
addMarkers prend 3 arguments dont le dernier est optionnel :
- le premier est notre tableau de marqueurs
- le second est le niveau minimal de zoom à partir duquel seront affichés nos marqueurs : nous avons spécifié 4. Notre carte étant en zoom 6, nos marqueurs s'afficheront. Essayez de dézoomer sur notre exemple : au bout de trois tentatives (niveau 3), nos deux marqueurs disparaissent.
- le 3e argument est le niveau maximal de zoom auquel nous voulons afficher nos marqueurs : mgr.addMarkers(batch, 4, 7) ;
Je vous l'accorde, utiliser un manager pour deux marqueurs, c'est un peu limite. Mais nous saurons faire lorsque nous en aurons 200...
Le résultat final
Sur notre deuxième exemple, il est à présent bien plus facile de différencier nos quatre sites car chacun a son icône personnelle.
Nous n'avons utilisé que des icônes proposées par Google, par simplicité. Des icônes très sympa, par exemple pour la météo, se trouvent à cette adresse, avec les images d'ombres associées :
Nous pouvons bien entendu créer notre propres icônes, personnalisées pour notre site, comme sur les sites de Velib ou Peuplade.