Sur les cartes google map, les icônes peuvent présenter une info bulle, avec du contenu html, et des présentations via des onglets. Version 3 de l'api google map.
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
Article écrit par Janol le 07/02/2013
(Hits 6450 - Catégorie : Googlemap)
Faites passer - Imprimer
Commentaires
Cet article n'a pas encore été commenté.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.
Autres publications Googlemap
Polyline pour tracer un itinéraire sur une carte
Comment tracer un itinéraire sur une carte googlemap en version 3. C'est la fonction polyline qui est utilisée via l'API Googlemap
(écrit le 17/02/2013 - 5.565 lectures)
Marker selon le clic
Ajouter à une carte google map, un marqueur dès lorsque l'internaute clic sur la carte. Compatible api v3.
(écrit le 04/02/2013 - 3.272 lectures)
Tutoriels Webmaster
Référencement :
Depuis l'arrivée de l'intelligence artificielle dans nos vies, bien des domaines sur internet se posent des questions, les webmaster sont ainsi concernés, se demandant si l'indexation de leur site par GPTBot est profitable.
Référencement :
Comment analyser les pages de la search console qui sont répertoriées par Google comme explorées mais non indexées. Faut-il demander leur indexation ou n'y aurait-il pas quelque chose de mieux à faire.
Référencement :
Comment Google Analytics et la Search console Google fonctionnent. Quelle est la différence entre ces outils ? Est ce qu'ils interagissent entre eux ?
Scripts :
Internet a deux caractéristiques principales : Cela bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.
Scripts :
Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la capture de telles pages, pour contrôler en un coup d'oeil le résultat.
Conception :
Optimiser un site web avec du responsive design est un pas de plus fait vers l'utilisateur final
Pour autant, si une page du site a un poids de plusieurs méga, l'utilisateur risque, s'il est sur un téléphone mobile, de partir avant que la page ne soit complétement chargée.
Outils :
Comment gérer les erreurs 404 not found sur le fichier browserconfig.xml, alors que celui ci est demandé par le navigateur.
Scripts :
Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).
Pages webmaster
Actu Webmaster
Thèmes Phortail