Load Same ACF Karte zweimal auf der gleichen Seite

Ich arbeite an einer Website: MetroCRE und versuche, die Google Maps-Integration mit Advanced Custom Fields zu verwenden.Load Same ACF Karte zweimal auf der gleichen Seite

Jetzt funktioniert die Karte, aber aufgrund der spezifischen Bedürfnisse der Kunden, wollen sie es an einem Ort auf dem Handy, und innerhalb der Tab-Auswahl, die auf dem Desktop existiert.

Es ist jedoch nicht möglich, das Google Map-Feld zweimal auf derselben Seite zu laden.

Auf Mobile, die Karte funktioniert, oder den Browser Ändern der Größe überhaupt wird es machen laden, aber beim Laden der Seite wird es nicht bei >= 768px

Kennt jemand irgendeine Weise daran vorbei?

Quelle

2016-06-14 Ishio

Sind Sie sicher, dass die Karte funktioniert? Weil, wenn ich es überprüfte, es eine leere Karte zeigt. – TheDrot

Wenn Sie auf Mobile schauen oder die Größe der Seite ändern, wird geladen. – Ishio

Da die Karte nach dem Ändern der Größe zu arbeiten beginnt ...

Von ACF Website.

Lösen der versteckten Karte Ausgabe

der Google Map API wird nicht funktionieren wie auf einem verborgenen Element initialisiert erwartet. Wenn das Element angezeigt wird, wird die Karte nicht angezeigt. Dieses Szenario ist am wahrscheinlichsten, wenn Sie ein Popup-Modal verwenden.

Um dieses Problem zu lösen, lösen Sie einfach das Ereignis 'resize' in der Kartenvariablen aus, nachdem das Kartenelement sichtbar ist.

// popup is shown and map is not visible 
google.maps.event.trigger(map, 'resize');

Also würde ich ein Ereignis hinzufügen, wenn Sie auf eine Registerkarte Karte klicken, um die Größenänderung auszulösen. Setzen Sie den Code in acf_google-map.js am Ende

$(document).ready(function(){ 

    $('.acf-map').each(function(){ 

     // create map 
     map = new_map($(this)); 

    }); 

    $('#map-tab').click(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 

});

EDIT:

Da Tabs dort Animation verblasst so legt eine Verzögerung in Resize-Trigger

$('#map-tab').click(function() { 
    setTimeout(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }, 200); 
});

Quelle

2016-06-15 00:45:14 TheDrot

Ich habe den Code [hier.] (Https://codeshare.io/sn81f) Ich habe versucht, Ihren Vorschlag zu implementieren, aber immer noch, wenn ich auf den Code klicken, funktioniert es nicht. – Ishio

@Ishio Ja, es funktioniert nicht, weil Sie es nicht an der richtigen Stelle platzieren. Sie sollten den Code in der Datei "acf_google-map.js" am Ende nach '$ ('. Acf-map') einfügen. Je (function()'. Sehen Sie sich die aktualisierte Antwort an. – TheDrot

@Ishio Der Grund, warum es nicht funktioniert Irgendwo anders ist, weil die 'map'-Variable nur in der selbstausführenden Funktion dieser Datei existiert.Wenn Sie versuchen, irgendwo anders zu verwenden, greift es nur ein HTML-Element mit ID 'map' und das tut natürlich nichts für Google Map Refresh. – TheDrot

Obwohl es nicht der beste Weg, Um darüber zu gehen, fand ich die Lösung zu meinem Problem here.

Es stellt sich heraus, dass das Hinzufügen einiger CSS zum Rendern beider Registerkarten, aber das Verschieben der Registerkarten von der Seite funktioniert, da google.maps.event.trigger(map, 'resize'); bei der Aktivierung der Registerkarten nicht funktioniert.

Unten ist das CSS, das ich verwendet habe, um es zum Laufen zu bringen. Funktioniert gut für Responsive.

.tab-pane { display: block !important; position: fixed; right: -9999px; width: 100%; } 
.tab-pane.active { position: relative; left: 0; }

Wenn jemand eine nicht-CSS-Lösung hat, bitte, lassen Sie mich wissen, wie die obige Antwort von TheDrot nicht für mich arbeiten.

Quelle

2016-06-15 12:59:33 Ishio

Load Same ACF Karte zweimal auf der gleichen Seite

Antwort

Verwandte Themen