Ich habe eine Seite und eine Google Map befindet sich zunächst in einem versteckten Div. Ich zeige dann das Div, nachdem ich auf einen Link geklickt habe, aber nur oben links auf der Karte wird angezeigt.
Ich habe versucht, diesen Code nach dem Klick auszuführen:
map0.onResize();
oder:
google.maps.event.trigger(map0, 'resize')
irgendwelche Ideen. Hier ist ein Bild von dem, was ich sehe, nachdem ich das Div mit der versteckten Karte darin gezeigt habe.
Antworten:
Habe es einfach selbst getestet und hier ist, wie ich es angegangen bin. Ziemlich einfach, lassen Sie mich wissen, wenn Sie eine Klarstellung benötigen
HTML
CSS
Javascript
quelle
Ich hatte das gleiche Problem und stellte fest, dass beim Anzeigen des Div der Anruf
google.maps.event.trigger(map, 'resize');
das Problem für mich zu lösen scheint.quelle
Wenn Sie keine Variablenzuordnung zur Verfügung haben, sollte dies das erste Element in
div
GMAP sein (es sei denn, Sie haben etwas Dummes getan) .quelle
Ich hatte eine Google-Karte in einem Bootstrap-Tab, die nicht richtig angezeigt wurde. Das war mein Fix.
quelle
'a[href="#profileTab"]'
,step-2
der die Karte DIV enthält.So aktualisieren Sie die Karte, wenn Sie die Größe Ihres Div ändern
Es reicht nicht aus, nur anzurufen.
google.maps.event.trigger(map, 'resize');
Sie sollten auch die Mitte der Karte zurücksetzen.So warten Sie auf das Größenänderungsereignis
Winkel (ng-show oder ui-bootstrap kollabieren)
Binden Sie direkt an die Sichtbarkeit des Elements und nicht an den Wert, der an ng-show gebunden ist, da die $ watch ausgelöst werden kann, bevor die ng-show aktualisiert wird (sodass das div weiterhin unsichtbar ist).
jQuery .show ()
Verwenden Sie den eingebauten Rückruf
Bootstrap 3 Modal
quelle
Wenn Sie eine Google Map durch Kopieren / Einfügen des Iframe-Codes eingefügt haben und die Google Maps-API nicht verwenden möchten , ist dies eine einfache Lösung. Führen Sie einfach die folgende Javascript-Zeile aus, wenn Sie die versteckte Karte anzeigen. Es wird nur der iframe-HTML-Code genommen und an derselben Stelle eingefügt, sodass er erneut gerendert wird:
jQuery-Version:
Der HTML:
Das folgende Beispiel funktioniert für eine Karte, die ursprünglich auf einer Registerkarte "Bootstrap 3" ausgeblendet war:
quelle
https://www.google.com/maps/embed/v1/place?..
Es ist auch möglich, einfach das native Fenstergrößenänderungsereignis auszulösen.
Google Maps lädt sich automatisch neu:
quelle
Ich hatte das gleiche Problem, das
google.maps.event.trigger(map, 'resize')
funktionierte nicht für mich.Was ich getan habe, war einen Timer zu setzen, um die Karte zu aktualisieren, nachdem die
div
...Ich weiß nicht, ob es der bequemere Weg ist, aber es funktioniert!
quelle
Mit jQuery können Sie so etwas tun. Dies hat mir geholfen, eine Google Map in Umbraco CMS auf eine Registerkarte zu laden, die nicht sofort sichtbar ist.
quelle
Meine Lösung ist sehr einfach und effizient:
HTML
CSS
Jquery
quelle
Oder wenn Sie gmaps.js verwenden , rufen Sie auf:
wenn dein div angezeigt wird.
quelle
Ich denke, die ursprüngliche Frage bezieht sich auf eine Karte, die in einem versteckten Teil der Seite initialisiert ist. Ich habe ein ähnliches Problem gelöst, indem ich die Größe der Karte im ausgeblendeten Bereich geändert habe, sobald das Dokument fertig ist, nachdem es initialisiert wurde, unabhängig von seinem Anzeigestatus. In meinem Fall habe ich 2 Karten, eine wird angezeigt und eine wird ausgeblendet, wenn sie initialisiert werden, und ich möchte nicht jedes Mal eine Karte initialisieren, wenn sie angezeigt wird. Es ist ein alter Beitrag, aber ich hoffe, er hilft jedem, der sucht.
quelle
Ich habe festgestellt, dass dies für mich funktioniert:
verstecken:
zeigen:
quelle
Bei Verwendung in Bootstrap v3-Registerkarten sollte Folgendes funktionieren:
Wo
tab-location
ist die ID der Registerkarte, die die Karte enthält?quelle
Wie John Doppelmann und HoffZ angegeben haben, setzen Sie den gesamten Code wie folgt in Ihrer Div-Show-Funktion oder Ihrem Onclick-Ereignis zusammen:
Es hat perfekt für mich funktioniert
quelle
Meine Lösung war:
CSS:
jQuery:
quelle
Ich mochte es nicht, dass die Karte erst geladen wurde, nachdem das versteckte Div sichtbar geworden war. In einem Karussell zum Beispiel funktioniert das nicht wirklich.
Diese Lösung besteht darin, dem ausgeblendeten Element eine Klasse hinzuzufügen, um es einzublenden und stattdessen mit der absoluten Position auszublenden. Anschließend wird die Karte gerendert und die Klasse nach dem Laden der Karte entfernt.
Im Bootstrap-Karussell getestet.
HTML
<div class="item loading"><div id="map-canvas"></div></div>
CSS
JS
quelle
Verwenden Sie diese Codezeile, wenn Sie eine Karte anzeigen möchten.
quelle
quelle
Erster Beitrag. Mein googleMap div befand sich in einem Container div mit {display: none}, bis auf die Registerkarte geklickt wurde. Hatte das gleiche Problem wie OP. Das hat bei mir funktioniert:
Stecken Sie diesen Code in und am Ende Ihres Codes, wo auf die Registerkarte "Container-Div" geklickt wird und Ihr verstecktes Div angezeigt wird. Wichtig ist, dass Ihr Container-Div sichtbar sein muss, bevor die Initialisierung aufgerufen werden kann.
Ich habe eine Reihe von hier und auf anderen Seiten vorgeschlagenen Lösungen ausprobiert und sie haben bei mir nicht funktioniert. Lassen Sie mich wissen, ob dies für Sie funktioniert. Vielen Dank.
quelle
Fügen Sie diesen Code vor dem div hinzu oder übergeben Sie ihn an eine js-Datei:
Dieses Ereignis wird nach dem Laden des Div ausgelöst, sodass der Karteninhalt aktualisiert wird, ohne dass F5 gedrückt werden muss
quelle
Beim Anzeigen der Karte geokodiere ich eine Adresse und setze dann das Kartenzentrum. Das
google.maps.event.trigger(map, 'resize');
hat bei mir nicht funktioniert.Ich musste ein verwenden
map.setZoom(14);
Code unten:
quelle
quelle