Info Bulle avec onglet sur un marker
Ce code exemple va monter comment afficher une icône en un lieu donné et d'y ajouter une bulle explicative sur le lieu.
Pour illustrer le propos, nous avons choisi de se positionner sur Montréal et d'y présenter notre dernier site web, un blog sur Montréal.
La version 3 l'API googlemap permet comme en version 2 d'afficher une icône sur un lieu donné. Le code est simplement totalement différent pour des fonctionnalités au minimum identiques.
L'icône peut être personnalisée ou choisie dans la palette de couleur de l'api.
Il peut y avoir un attribut titre affiché lors du survol du pointeur de la souris, un ombrage.
Le tout est simplifié côté programmation tant en exécution (moins de code) qu'en lecture (avec plus de clarté).
Pour les infobulles, il faut tout d'abord ajouter quelques lignes de code javascript appelées sur le serveur de google.
La bulle est déclarée avec ses caractéristiques, ensuite on va y ajouter un onglet qui affiche un contenu caractère, puis on va ajouter un second onglet qui va afficher le contenu d'une balise div.
Les deux contenus ont préalablement été déclarés puis initialisés.
Le code est montré ici et se trouve visible dans la page exemple ci-dessous
var image = new google.maps.MarkerImage(
'mm_20_red.png',
// This marker is 12 pixels wide by 20 pixels tall.
new google.maps.Size(12, 20),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(6, 20)
);
var shadow = new google.maps.MarkerImage(
'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_shadow.png',
new google.maps.Size(20, 20),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(5, 20)
);
var marker = new google.maps.Marker({
position: latLng,
title: 'Cliquez-moi',
icon: image,
shadow:shadow,
map: map,
draggable: false
});
infoBubble = new InfoBubble({
minWidth: 50,
minHeight: 150
});
infoBubble.addTab('Le site', contentString);
infoBubble.addTab('Visite ', div);
Voir en ligne : google map infobulle