Problème d'affichage iframe Googlemap dans des onglets

Bonjour et bonne année 2015 !

Comme indiqué dans le titre, je me retrouve face à un problème d'affichage erroné de mes cartes Googlemap lors de l'utilisation de l'iframe fourni par Google, dès qu'il s'agit de les placer dans des onglets.

Je travaille via Instant WP en local sur mon site Wordpress, et ne peut donc fournir un lien vers le site qui n'est pas actualisé à cette heure, mais je peux néanmoins au besoin reproduire le problème si besoin était, sur un site de test.

J''utilise un thème premium (impreza) incluant le plugin Visual Composer, qui me permet donc d'utiliser des shortcodes pour afficher sur mes articles aussi bien des Googlemaps que des éléments avec onglets.

J'ai choisi les onglets puisqu'il me faut afficher une carte personnalisée avec divers marqueurs, miniatures, et description pour 4 villes différents (donc 4 onglets). Le problème est que l'option incluse dans Visual Composer "add a google map" est trop limitée : 5 marqueurs maximum, pas de miniatures, pas de description, etc. J'ai tenté d'obtenir de l'aide auprès du support d'Impreza, mais ils prétendent que le problème se situe au niveau de Google ce qui est vrai en partie : après avoir fait de nombreuses recherches sur ce problème récurrent, il semblerait que nombre de développeurs de plugins aient inclus des fixes dans leurs updates pour parer à cette déficience, mais ce n'est à priori pas le cas de Visual Composer malheureusement. Ayant donc épuisé mes idées ainsi que mes possibilités de support, je me tourne vers vous dans l'espoir que vous vous pourrez m'aider à trouver la solution à ce souci plus qu'handicapant et me ralentissant énormément dans le développement de mon site.

Explications

Comme vous pourrez le constater ci-dessous, le premier onglet s'affiche correctement. Hélas, dès que l'on clique sur un des autres onglets, l'affichage est alors erroné, comme s'il faisait un zoom out maximum. (il y a 2 google maps dans chacun des images, la 1ère est une simple googlemap ajoutée via le plugin, pour montrer que seul l'iframe pose problème au niveau du display)

Affichage correct lors du chargement initial de la page (1er onglet)
http://i38.servimg.com/u/f38/12/90/91/18/tokyo-11.jpg

Affichage incorrect lors du clic sur le 2ème onglet
http://i38.servimg.com/u/f38/12/90/91/18/tokyo-10.png

D'après mes recherches, il semblerait que ce problème soit du au fait que Google ne puisse calculer la taille du conteneur lors du chargement de la page puisqu'il est masqué par le premier onglet à ce moment.

J'avoue que je patauge assez concernant ce problème, mes connaissances en la matière étant assez limitées en ce qui concerne le comportement d'éléments via script (jquery je présume).

A priori, la solution résiderait dans cette fonction:

google.maps.event.trigger(map, "resize");

et le code à mettre en œuvre serait le suivant :

if($(this).attr('href')=='#tab2'){
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
}

[ source : http://blog.codebusters.pl/en/google-maps-in-hidden-div ]

Le souci, c'est que je n'arrive pas à le mettre en œuvre, ne sachant trop où ni comment appliquer les modifications, ceci n'étant pas vraiment ma tasse de thé.

Quelqu'un aurait-il la patience et la gentillesse de m'aider à régler ce problème?

Un grand merci d'avance pour toute aide ou information que vous m'apporterez.
Modifié par kuromatsu (11 Jan 2015 - 04:48)

Bonjour voici un bout de code !

Dans le head

<script type="text/javascript">
function refresh(){setTimeout(function(){document.getElementById('maps-actu').innerHTML='<iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?CODE"></iframe>'},0)}
</script>

Code a mettre dans l'onglet

 <div id="maps-actu">
              <noscript>
              <p> <strong> Javascript doit être activé dans votre navigateur</strong><br />
                pour utiliser toutes les fonctionnalités de ce site.</p>
              </noscript>
            </div>

Bonjour bibi67 et merci !

J'ai hésité avant d'écrire cet article à updater votre propre post, puisqu'il traitait du même problème.

J'ai tenté 2 approches avec vos snippets : en utilisant le 1er dans le header.php puis dans le custom html field de mon thème sans obtenir aucun résultat, et le 2ème dans l'onglet concerné, en y incluant l'iframe (en ôtant le paragraphe inutile).

Comme dit, je ne suis pas vraiment très à l'aise avec les scripts, alors peut-être m'y prends-je de la mauvaise manière?

L'iframe est tout ce qu'il y a de plus standard, il s'agit de celui fourni par google pour cette map.

<div id="maps-actu"><iframe src="https://mapsengine.google.com/map/embed?mid=zx3PIhZnIw5E.kokEBtQ9d0J4" width="100%" height="500"></iframe></div>

Or, si mes pauvres capacités en matière de codage ne me trompent pas, le gros du boulot est fait par le snippet du header, le deuxième ne servant au final qu'à définir un container? Dois-je reproduire l'erreur en question sur un site de test pour vous permettre de l'analyser avec firebug ou un autre plugin?

Merci encore de votre aide par avance, j'apprécie vraiment !

PS: 67 = Elsass?

Petit up dans l'espoir d'obtenir des infos supplémentaires...

Personne pour m'orienter ? Même si cela peut sembler évident, chacun sa tasse de thé, et j'avoue que ça ne fait que quelques mois que je me suis plongé dans la marmite, aussi certaines explications spartiates peuvent me sembler déroutantes.