Google Map permet grâce à sa librairie de créer des cartes personalisées, autant par leur contenu que par leur interface.

Les styles des “markers” (”GMarker”, “GIcon”), zones (”GPolygons”, “GPolyline”) sont facilement modifiables en javascript grâce à la multitude de méthodes prédéfinies par Google.

Malheureusement, il n’existe pas encore de solutions par défaut permettant de modifier en javascript le style des infobulles (infobulles s’affichant au-dessus d’un marker).

Pour contourner ce problème, un développeur, du nom de Joe Monahan, a ajouté à la librairie Open Source de Google Map, un fichier javascript (extinfowindow.js) permettant de modifier le css de l’infobulle.

Il suffit en fait d’insérer ce fichier javascript après l’appel de la librairie de Google Map. Ensuite, il faut changer après chaque création d’un marker et ajout d’un évènement la méthode classique “openInfoWindow()” par “openExtInfoWindow()”. Voici un exemple de l’appel à cette méthode :

GEvent.addListener(marker, “click”, function() { marker.openExtInfoWindow(map,”geolocalisation”,html); });

**marker : marker instancié (GMarker)

**map : carte instancié (GMap2)

**”geolocalisation” : nom de la div qui sera créée pour l’infobulle et utilisée pour modifier le style du css

**html : code html qui sera affiché dans l’infobulle

Il faut également inclure un fichier css. En fait, chaque zone de l’infobulle est définie par une nomenclature à respecter dans le css. Le nom de la div “geolocalisation” est très important, puisqu’il sert de préfixe pour toutes les div dans le fichier css.

Il existe d’autres méthodes intéressantes avec extinfowindow.

Pour une meilleure compréhension, je vous invite à visiter cette page d’exemples, mais aussi cette page de présentation.

CSS Google Google Map infobulles