Google Maps funktionieren nicht, wenn sie innerhalb von jQuery-Tabs platziert werden. Das ist eine Frage, die überall im Web steht. In meiner bisherigen Forschung scheint keine der Lösungen zu funktionieren. Hoffentlich kann hier jemand helfen ...
Dies ist ein Screenchot des Fehlers in Firefox 10, Chrome 17, Safari 5.1.2, Opera 11.61. Ссылка
Der Fehler ist nicht in IE8 vorhanden und ist in 9 intermittierend. In Firefox geht es weg, wenn Sie FireBug öffnen.
Die Seite befindet sich in Wordpress 3.3.1 und die Karte wird über ein Plugin erstellt / abgerufen. Es scheint nicht wichtig zu sein, welches Karten-Plugin ich verwende. Der Fehler bleibt derselbe. Basierend auf meinen Recherchen scheint dies ein js / jQuery-Problem zwischen den Tabs und dem Google Map API Javascript zu sein, kein Wordpress / Plugin-Problem.
Hier ist mein Code. Im Moment benutze ich das Plugin wp-gmappity-easy-google-maps für die Karten, aber ich habe auch das Comprehensive-google-map-plugin ausprobiert. Beide funktionieren großartig außerhalb der Tabs.
HTML:
%Vor%
Hier ist das relevante CSS:
%Vor%Hier ist ein Link zu der Datei, die meine Tabs regelt: Ссылка
flowplayer.org/tools/forum/25/79274 ist eine Lösung, die ich gefunden habe (scrolle nach unten). Allerdings funktionieren checkResize und resizeMap nicht mehr (siehe api-Referenz unter code.google.com/apis/maps/documentation/javascript/reference.html#Map, scrollen Sie ein wenig nach "Events" und suchen Sie nach google.maps.event. trigger (map, 'resize') was scheinbar der Ersatzcode ist). www.raymondcamden.com/index.cfm/2009/6/5/jQuery-Tabs-and-Google-Maps ist eine andere Beschreibung, die zu alt ist.
Ich habe das vorgeschlagen:
%Vor%aber ich habe keine Ahnung, wie ich es umsetzen soll (einige Wege ohne Erfolg) oder ob es überhaupt funktionieren würde.
Aus all meinen Nachforschungen geht hervor, dass Sie ein Map-Größenänderungsereignis auslösen müssen, wenn die Registerkarte mit der Karte ausgewählt ist. Bis jetzt hatte ich kein Glück, irgendwelche der Lösungen da draußen anzupassen - zumal ich mit js / jQuery vertraut bin. Es scheint, als ob jemand, der mit js oder jQuery vertraut ist, dies lösen könnte.
Bitte helfen Sie mir.
Ich habe die Plugins aufgegeben und bin mit dem Google Maps-Shortcode, der für das von mir verwendete Thema veröffentlicht wurde, gegangen. Während ich die Custom-Markers-Funktionalität verliere, konnten die Theme-Entwickler endlich dazu beitragen, dass alles funktionierte. Sie haben der shortcode-PHP-Datei den folgenden Code hinzugefügt.
%Vor%Dieser Code löst das erneute Laden einer Karte aus, wenn auf die Registerkarte mit der Karte geklickt wird. Es zentriert auch die Karte. Diese Lösung löste das Problem für mich und die Google Maps werden jetzt in den jquery Tabs angezeigt. Hoffentlich können einige der mehr JavaScript-versierten Benutzer hier (und Plugin-Entwickler !!!) diese Lösung an ihre eigenen Karten-in-Tabs-Probleme anpassen.
Rogercuts Antwort hat mich dahin gebracht, wo ich sein musste. Ich verwende Bootstrap-Registerkarten, verschachtelt und konnte die Karte nicht aktualisieren.
Wenn ich auf die Tab-Gruppe 2 (# tg2) klicke, wird der Map-Tab als erster angezeigt. Ich musste auch die Größenänderung auslösen, wenn jemand in der Tab-Gruppe 2 auf den Tab der zweiten Ebene (# tab1) geklickt hat.
Der Click-Handler funktioniert, aber das Problem ist, dass beim Klicken die Registerkarte immer noch ausgeblendet ist ... Wenn Sie eine kleine Verzögerung einstellen, wird die Registerkarte angezeigt, bevor die Größenänderung ausgelöst wird.
%Vor%Also sagen wir dem Browser, dass er 50 ms nach dem Klick warten soll, um die Größenänderung vorzunehmen. In meinen Tests war 50ms ausreichend Zeit, um den Tab zu zeigen, aber kurz genug, dass er für den Benutzer nicht wahrnehmbar ist. Tatsächlich funktionierte mein Test mit einer Verzögerung von nur 1 ms auf den 4-5 Maschinen, auf denen ich es getestet hatte - sogar einem langsamen Hundelaptop, den wir im Speicher hatten. 50ms ist nur sicher.
Hoffe das hilft jemand anderem.
Bei der Entwicklung einer Website, die einen Kartenregister-Inhalt enthielt, stieß ich auf das gleiche Problem. Die Website ist Ссылка (in Spanisch, klicken Sie auf das Kartensymbol oder den Link "ubicacion"). Derselbe Fehler, den Sie erwähnen, ist immer dann aufgetreten, wenn der Tab-Div zusammen mit den anderen in seiner Tab-Gruppe geladen wurde. Ich habe herausgefunden, dass es kein Problem geben würde, wenn ich nach den anderen Tabs etwas Zeit zum Laden hätte.
Ich könnte es mir leisten, weil ich sowieso 3,5 Sekunden für den Wrapper ausgegeben habe, damit alle Hintergrundfotos geladen werden und die Karte sich beim Laden in einem unsichtbaren Tab befindet, also brauche ich sie nicht sofort auftauchen.
Die Map-Registerkarte wird dann als Callback-Funktion direkt nach dem ganzen Wrapper geladen. Wenn Sie die Seite überprüfen, suchen Sie nach 'pane-container'. Innerhalb von 'Scheiben' finden Sie das Karten-Div geladen am Ende.
Der relevante jQuery-Code, den ich auf der Seite index.php verwende, lautet wie folgt:
%Vor%Ich hoffe, das hilft irgendwie. Vergessen Sie zu erwähnen, dass der Kartencode als Inhalt in einem bestimmten Post eingebettet ist. (Übrigens, die Kartenmarkierung befindet sich oben rechts, um die Hauptzugangsstraßen anzuzeigen.)
Prost!
Das Problem (wie oben und an anderen Stellen erwähnt) ist, dass das Karten-Div sichtbar sein muss, um zu funktionieren. So laden Sie die Karte in eine Registerkarte, die sichtbar ist. Wenn Sie möchten, wechseln Sie zu der Registerkarte, die Sie anzeigen möchten.
Dazu habe ich der Karte einen einmaligen Ereignis-Listener hinzugefügt. Innerhalb dieser Funktion wechselte ich zur ersten Registerkarte. Während des Ladens sehen Sie den Kartenbereich für etwa eine Sekunde, bevor der Tab geändert wird. Der Vorteil ist, dass der Benutzer nichts dafür tun muss.
%Vor%Keine der obigen Antworten ist vollständig korrekt. Das Problem tritt auf, weil der Kartenbereich auf Breite festgelegt ist: 0; height: 0 standardmäßig vor dem Laden und erwartet dann, dass Sie entweder die Dimension übergeben oder die Dimensionen vom übergeordneten Element abrufen, da dies innerhalb von jQuery-Registerkarten keine Dimensionen gibt.
Wie bereits erwähnt, binden Sie sich an das click -Ereignis Ihrer Registerkarte und legen Sie die map_canvas-Dimension fest und rufen Sie dann google.maps.event.trigger ()
auf %Vor%Vorher habe ich das gleiche Problem bei der Implementierung von Google-Map-Tabs, besonders wenn die Map nicht in der ersten Auswahl ist. Aber ich habe es versucht und es ist Arbeit mit einer einfachen Lösung wie folgt:
Machen Sie eine einfache js-Funktion:
%Vor%Ich habe das für den Bootstrap Tab gelöst. Es kommt nur darauf an, die Funktion zum Ändern der Kartengröße direkt nach dem Anzeigen des Kartencontainers aufzurufen.
Ich habe folgende out-Seite der initialize () -Funktion hinzugefügt:
%Vor%Dies funktioniert möglicherweise nicht für alle! Eine Lösung, die für mich funktionierte, war, die versteckten Registerkarten anzuzeigen, aber irgendwo "nicht sichtbar" für den Benutzer. Dadurch kann die Karte gerendert werden, obwohl sie sich nicht in der ersten / aktiven Registerkarte befindet. Finde einen Weg, um nur auf die versteckten Tabs zu zielen:
%Vor%Kartenbreite 100% und keine feste Breite.
Probieren Sie es aus:
Ändern
%Vor%bis
%Vor%Fügen Sie dann dieses Javascript
hinzu %Vor%In einem Skript-Tag oben auf der Seite. Was dies für Sie tun sollte:
Durch Hinzufügen des id -Attributs zum Tab-Link geben Sie explizit an, dass dort eine Map enthalten ist. Sie warten dann auf das Ereignis onClick , das von der jQuery-Registerkartenbibliothek bereitgestellt wird, die ausgelöst wird, wenn eine Registerkarte ausgewählt wird, wodurch die Größe der Zuordnung geändert wird.
Das Problem ist einfach. Maps müssen in einem Element mit Dimensionen gerendert werden. Wenn Sie ein Tab-System verwenden, das den Inhalt der Registerkarte ausblendet, haben alle Elemente innerhalb des Tab-Inhalts keine Dimensionen, während der übergeordnete Bereich ausgeblendet ist. Wenn Sie mit jQuery tools css arbeiten möchten, legen Sie den "versteckten" Inhalt statt versteckt auf dem Bildschirm fest.
Um zu verwenden: google.maps.event.trigger (map, 'resize');
Sie benötigen Zugriff auf die initiale Map-Objektvariable "var wpgmappitymap1", die jedoch innerhalb der Map-Init-Funktion liegt. Wenn Sie es zu einer globalen Variablen machen, können Sie es in Ihren Größenanpassungs-Trigger einfügen
%Vor%Es funktioniert für mich, erfüllt meine Anforderungen, und Sie können es als Referenz verwenden:
%Vor%Hinweis: Sie können die CSS-Klasse "map-button" zum Positionieren der Schaltfläche nach Bedarf erstellen. Setzen Sie Ihr eigenes Bild unter. Ersetze ID="gmap" als deine. Hoffe es hilft dir.
Tags und Links jquery google-maps tabs google-maps-api-3 jquery-tabs