Google Map est devenu indispensable pour positionner un prestataire géographiquement. Cet outil est bien connu des internautes et il est très facile à prendre en main.
Cependant, une carte géographique en plein milieu d’un site ça nous rappelle un peu trop les manuels scolaires de notre enfance. D’autant que les couleurs de Google Map : bleu (#A5BFDD) pour la mer, vert (#C9DFAF) pour les forêts, orange (#F8BB41) pour les routes… ne se marient pas toujours avec la charte graphique de votre site.

Couleurs types d'une Google Map

Bref, il est souvent préférable de masquer cette carte et ne la faire apparaître que lorsque le visiteur souhaite situer votre activité ou toutes autres sujets en rapport avec la page qu’il visite. Pour cela on a recours à JQuery (ou un javascript bateau) qui permet de masquer un élément de votre page sans l’omettre du code source. L’avantage étant que cet élément est tout de même pris en compte par le moteur de recherche (dans le cas d’une GMap ce n’est pas le plus utile on est d’accord).

Cependant, vous aurez certainement remarqué qu’à l’affichage de cette carte, il apparaît un bug. Effectivement, la carte appelée lors du chargement de la page n’arrive pas à prendre les dimensions de son conteneur (votre div) celui-ci étant alors masqué (display: none). Symptômes : votre curseur n’est pas positionné au bon endroit ou encore la carte n’affiche qu’une zone carrée minimum.

La solution est toute simple ! Il suffit d’initialiser la GMap en même temps que vous lui demandez de s’afficher ! Voici le code :

$(document).ready(function () {
$(« div#contenantGmap »).hide();
// click sur le lien pour afficher la carte
$(« a#lien »).click(function(){
$(« div#contenantGmap »).slideDown();
// appel de la fonction intialize GMap V3
initialize();
});
});

La GMap prend alors les valeurs height et width de votre div (#contenantGmap) qui passe en display: block.