web-dev-qa-db-fra.com

Google Map iframe dans un numéro d'onglet

J'ai intégré une carte sur le troisième onglet d'une page.

Page ici > onglet 'Itinéraire'

Si vous accédez directement à l'onglet pendant le chargement de la page, la carte se charge parfaitement. Cependant, si vous attendez que la page soit complètement chargée et que vous cliquez ensuite sur l'onglet "Itinéraire", la carte sera totalement agrandie et non dans la position souhaitée.

J'ai essayé d'entrer tous les détails comme

<iframe src="http://ridewithgps.com/routes/1342529/embed" height="500px" width="100%" frameborder="0" http://maps.google.com/maps?ll=43.790716,4.166708&z=8&t=m&hl=en-GB&gl=US&mapclient=apiv3&skstate=action:mps_dialog$apiref:1&output=classic></iframe>

mais cela ne fonctionnera toujours pas pour moi. Je connais très peu le langage Javascript, mais j'imagine qu'il doit être rechargé sur l'onglet ou quelque chose pour qu'il puisse zoomer.

javascriptembedgoogle-mapstabs
1
Ciarán

Vous utilisez iframe dans la structure de tabulation.
1) Lorsque la page est entièrement chargée, l'onglet iframe in itenary n'affiche rien. il ne charge donc pas correctement la carte agrandie.
2) Lorsque vous passez à l'onglet Itenary avant la fin du chargement, iframe est visible et visible dans le bloc d'affichage. Il charge donc correctement l'url/la carte.

Donc, pour cela, vous pouvez donner l’identifiant à votre iframe en lui disant "#itenary_map". et relancez iframe lorsque vous cliquez sur l'onglet Itenary comme ci-dessous


var iframe = document.getElementById("itenary_map");
iframe.src = iframe.src;

Mettre à jour:
Vous pouvez utiliser le code jQuery ci-dessous dans votre fichier main.js.


jQuery('#section-tabs-header li:nth-child(3)').click(function() { //click on itenary tab


if( !jQuery( '#itenerary_map' ).find('iframe').hasClass('clicked') ){//Check if its clicked once or else will reload iframe on every click
        jQuery( '#itenerary_map' ).find('iframe').attr( 'src', function ( i, val ) { return val; });

jQuery( '#itenerary_map' ).find('iframe').addClass( 'clicked' ); // add any class to say its clicked
    }
});

Vous pouvez modifier ci-dessus js en donnant des classes ou un identifiant à votre iframe. J'ai écrit ceci sous forme généralisée.

2
shahpranaf

Excellente réponse - je viens de rencontrer quelque chose de similaire et de travailler un peu plus pour le rendre encore plus généralisé:

jQuery().ready(function($) {
    $('.tabs').tabs();
    $('.tabs li').not(':first').click(function() { 
        tab_id=$(this).children('a').attr('href');
        iframe_id=$(tab_id).children('iframe').attr('id');
        if (!$('#'+iframe_id).hasClass('clicked')) {
            $('#'+iframe_id).attr(  'src', function ( i, val ) { return val; });
            $('#'+iframe_id).addClass( 'clicked' ); // add a class to say its clicked
        }
    });
});
0
user3079356