lundi 28 janvier 2013

Le HTML des info-bulles Google Maps

Il y a différentes façons d'incorporer des cartes Google Maps sur son site.
On peut utiliser l'API Google Maps, mais cela n'est pas toujours commode ou possible.
Un autre façon est d'utiliser l'option "Mes adresses" de Google Maps. Vos cartes personnelles sont ainsi enregistrées chez Google et vous pouvez les intégrer directement dans votre site personnel. Il suffit pour cela de récupérer l'IFRAME que vous adresse Google et de copier le code HTML correspondant.
Il est intéressant de modifier chaque adresse en sauvegardant et en modifiant le code du fichier KML.
On récupère donc le fichier KML et on le modifie dans un éditeur de texte (Wordpad par exemple).

On peut ainsi définir :
  • chaque style pour les épingles,

  • le contenu affiché dans les info-bulles.
      • disposer les infos en tableau
      • changer la couleur du texte
  • mette une vidéo au format vignette
  • ouvrir un lecteur audio sur un commentaire parlé.
  • afficher une imagette format timbre poste.


Je vais essayer de rassembler ici quelques informations pour modifier les info-bulles.
Voir les balises supportées dans Google Maps

 Introduire un tableau
 

  ou donner une teinte verte à la grille du tableau : 

 

ou limiter sa hauteur :

 
ou introduire une bordure au tableau :

 

liste de balises compatibles :



On peut disposer d'une gamme personnalisée d'épingles (pushpins). Dans ce cas l'ensemble des styles sont insérés au début du fichier KML. Voici par exemple des styles adaptés à un circuit nature:
style_photo
style_video
style_fossile




Ajouter un lecteur "pseudo" audio You Tube, insèrer une iframe You Tube qui aura été réajustée comme ceci :



Vous corrigez le code de la vidéo bien sûr. Auparavant, il faut mettre en ligne une vidéo You Tube sonorisée avec votre commentaire mp3 , basée sur une image fixe et exportée en toute petite taille (elle est inutile).
Seule la barre du lecteur You Tube apparaîtra dans l'info-bulle.
Voici un modèle général de contenu d'info-bulle :




Autre exemple dans lequel on a mis dans la bulle :
- du texte coloré
- une police différente
- en italiques
- une vignette video 240 x 135 px
 

dssdd dsdsd