Google Map iframe in einem Tab-Problem

Ich habe eine Karte in die dritte Registerkarte auf einer Seite eingebettet.

Seite hier > Tab ‘Reiseroute’

Wenn Sie direkt auf die Registerkarte klicken, während die Seite noch geladen wird, lädt sie die Karte perfekt. Wenn Sie jedoch warten, bis die Seite vollständig geladen ist, und dann auf den Tab “Route” klicken, wird die Karte vollständig ausgezoomt und nicht dort angezeigt, wo sie sein sollte.

Ich habe versucht, alle Details wie einzugeben

 

aber es wird immer noch nicht für mich arbeiten. Ich habe sehr wenig Wissen über Javascript, aber ich vermute, dass es auf der Registerkarte oder etwas neu geladen werden muss, um es zu vergrößern.

Solutions Collecting From Web of "Google Map iframe in einem Tab-Problem"

Sie verwenden iframe in der Registerkarte Struktur.So,
1) Wenn die Seite vollständig geladen wird, zeigt der iframe auf der Registerkarte iterary none an. Es lädt also die gezoomte Karte nicht richtig.
2) Wenn Sie vor dem Laden zu iterary tab wechseln, ist iframe Anzeigeblock, dh sichtbar, damit die URL / Map korrekt geladen wird.

Also, was Sie tun können, ist id zu Ihrem iframe sagen “#itenary_map”. und iframe erneut initialisieren, wenn auf die Registerkarte wie folgt geklickt wird

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

Aktualisieren:
Sie können unter jQuery-Code in Ihrem main.js verwenden.

 jQuery ('# section-tabs-header li: nth-child (3)') Klicken Sie auf (function () {// Klicken Sie auf iterary tab 

if (! jQuery (‘#itenerary_map’) .find (‘iframe’). hasClass (‘clicked’)) {// Prüfe ob es einmal angeklickt wurde oder sonst wird iframe bei jedem Klick neu geladen
jQuery (‘#itenerary_map’) .find (‘iframe’) .attr (‘src’, function (i, val) {return val;});
jQuery (‘#itenerary_map’) .find (‘iframe’). addClass (‘angeklickt’); // füge irgendeine class hinzu, um zu sagen, dass sie geklickt hat
}
});

Sie können über js ändern, indem Sie Ihrem iframe classn oder IDs zuweisen. Ich habe dies in verallgemeinerter Form geschrieben.

Ausgezeichnete Reaktion – stieß nur auf etwas Ähnliches und arbeitete daran ein bisschen mehr, um es noch allgemeiner zu machen:

 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 } }); });