Notice: wp_add_privacy_policy_content est appelée de la mauvaise manière. The suggested privacy policy content should be added only in wp-admin by using the admin_init (or later) action. Veuillez lire Débogage dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 4.9.7.) in /home/xavierbs/www/_blog/wp-includes/functions.php on line 4161
Mettre une Google Map dans une lightbox - Murviel Info

Mettre une Google Map dans une lightbox

Notez que cet article a été écrit pour la première fois il y a plus de 3 ans, mais n'est pas nécessairement obsolète.

google Map dans une lightbox
google Map dans une lightbox

Avant toute chose, il vous faut obtenir une clé API auprès de Google : https://console.developers.google.com/apis/

Si vous avez déjà essayé d’afficher une google Map dans une lightbox, c’est très certainement le résultat que vous avez obtenu, bien même une carte vide.

Ceci vient du fait que la carte a la propriété CSS : display: none afin de ne pas être affichée au démarrage, et de ne l’être que lorsque l’on clique sur un lien. Or le script de google Maps (ni même jQuery ou javaScript) n’est pas capable de déterminer les dimensions d’une <div> quand elle est cachée.

Une première solution consiste à appliquer la propriété visibility: hidden à la <div> concernée au démarrage et d’appliquer la propriété display: none avec un léger retard, permettant ainsi à google Maps de se charger. L’inconvénient est que visibility: hidden applique en fait une opacité de 0. La <div> occupe l’espace qui lui est assignée sur la page. Ceci pendant le temps que la carte se charge.

Une seconde solution est de sortir la <div> de la fenêtre en lui appliquant une position: absolute et une position suffisamment lointaine pour qu’elle n’apparaisse pas à l’écran.

Voyons donc ces deux techniques.

On crée donc notre google Map (javaScript API v3):

code HTML/js/CSS:

A la fin de la page, on charge le javaScript de la google Map.

Le code HTML/CSS:

Voici la page avec la carte affichée. Aucune lightbox n’est encore appliquée, la carte a une dimension 600px × 400px.

Appliquons à cette carte une lightbox simple: lightbox_me() est un plugin qui fait très bien cela (jquery.lightbox_me.js). Afin de ne pas afficher la carte au démarrage, on lui applique la propriété display: none.

lightbox sur la carte:

On charge jQuery et lightbox_me.js.

Cliquez sur le lien:

Nous allons donc retarder la mise en place de display: none, et appliquer une visibilité nulle visibility: hidden au démarrage.

visibility: hidden et setTimeout:

On laisse 800ms pour que la carte se charge. Pendant ce court instant, une partie de la page est occupée par une carte « invisible ». Une fois la carte chargée, on applique display: none (l’espace est libéré), et l’on remet visibility à visible.

Une autre façon de faire est d’appliquer une position: absolute et faire sortir la carte de la fenêtre en donnant par exemple la position left: -10000px;

position: abolute et carte sortie du cadre:

Lorsque l’on applique la lightbox, on redonne une position normale, le plugin se chargeant de cacher la carte.

Le code complet:

code HTML/CSS/js:

 

google Map dans une lightbox
google Map dans une lightbox

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *