Charger iframe avec carte de Google My Maps dans un div caché

Je vais dire plutôt en anglais ce qu'on cherche, c'est plus claire : loading iframe with Google My Maps map in a hidden div. Attention : nous parlons de Google My Maps et pas de Google Maps !!! No API here !

 
 
 
 
 
 
 
 
 
 

Après cliquer un bouton, votre contenu se montre mais la carte dedans ne s'affiche pas l'endroit que vous avez marqué. Le problème vient du fait que la carte ne pouvait pas se charger...

  • Il faut d'abord indiquer la source du lien de l'iframe blank,
  • puis charger le contenu caché du div,
  • puis donner l'attribut "source" à l'iframe,
  • puis, attacher un code "zoom" au lien,
  • et à la fin recharger l'iframe,
    • Les codes :

      <iframe id="mon-iframe" src="about:blank"></iframe>
      $('.mon-bouton').click(function(){
          // afficher le contenu
          $('.mon-contenu').slideDown(1000);
          // give link src to iframe + reload iframe from different domain
          // delay est optionnel, mieux attendre un peu
          // pour zoomer la carte à votre besoin (pour moi 13x), on colle à la fin "&zoom=13"
          $('#mon-iframe').delay(1000).attr('src','https://www.google.com/maps/d/embed?mid=zpyTE6U8sCW8.kSZugz2C6fsc&zoom=13');
          var iframe = document.getElementById('mon-iframe');
          iframe.src = iframe.src;
      });

      Pour moi ça marche, c'est génial...

      Sources:

       

Les commentaires sont fermés.