So laden Sie eine Google Maps-Karte in ein verstecktes Element

Lesezeit: 7 Minuten

Benutzeravatar von leora
leora

Ich habe eine Seite und eine Google Maps map befindet sich zunächst in einem versteckten div. Ich zeige dann das div, nachdem ich auf einen Link geklickt habe, aber nur die obere linke Seite der Karte wird angezeigt.

Ich habe versucht, diesen Code nach dem Klick auszuführen:

map0.onResize();

Oder:

google.maps.event.trigger(map0, 'resize')

Wie kann ich es tun?

Hier ist ein Bild von dem, was ich sehe, nachdem ich das Div mit der versteckten Karte darin gezeigt habe:

Alt-Text

  • @ Matt Ball – ich habe das zum Laufen gebracht. Nachdem ich das Google Map-Objekt erstellt habe, speichere ich das in einer globalen Variablen, damit ich später erneut darauf verweisen kann, und der Aufruf von Resize scheint jetzt zu funktionieren. Ich versuche, das Kartenobjekt nicht jedes Mal neu erstellen zu müssen, wenn ich es zeige, weil ich es den Leuten erlaube, hin und her zu wechseln.

    – leora

    1. November 2010 um 11:54 Uhr


  • @ooo das ist sehr einfach mit dem folgenden Code. Alles, was Sie hinzufügen müssen, ist eine if-Bedingung, um zu prüfen, ob das Kartenobjekt initialisiert wurde oder nicht. Dies war ein spontaner Code, der geschrieben wurde, um Ihr anfängliches Problem zu lösen, nämlich das korrekte Laden der Karte.

    – Philar

    1. November 2010 um 13:35 Uhr

  • @philar – ja. . danke hier. . daher die positive Bewertung :). In jedem Fall muss ich die Variablen auf globaler Ebene speichern, um eine Neuinitialisierung zu vermeiden

    – leora

    1. November 2010 um 14:08 Uhr


  • Im folgenden Code ist das Kartenobjekt implizit eine globale Variable, da es nicht innerhalb der Funktion „initialisieren“ deklariert wurde.

    – Philar

    2. November 2010 um 7:27 Uhr


Benutzeravatar von Eric
Erich

Ich hatte das gleiche Problem und stellte fest, dass beim Anzeigen des Div Calling google.maps.event.trigger(map, 'resize'); schien das Problem für mich zu lösen.

  • Um die ursprüngliche Mitte der Karte direkt nach der Größenänderung beizubehalten, sollten Sie die resize-Anweisung wie folgt erweitern: var center = map.getCenter(); google.maps.event.trigger(map, ‘resize’); map.setCenter (Mitte);

    – Johannes Doppelmann

    22. Februar 2013 um 16:13 Uhr


  • Nicht sicher warum, aber ich muss die Lösung in kleine setTimeout packen, damit sie funktioniert: setTimeout(function() {google.maps.event.trigger(map, ‘resize’)}, 100);

    – HoffZ

    27. Februar 2014 um 13:00 Uhr


  • @JohnDoppelmann Danke für den Tipp! Es war weder intuitiv, warum es das Zentrum nicht beibehielt, noch wie man es zurückdrängte.

    – Noah Duncan

    2. Mai 2014 um 23:06 Uhr

  • Legen Sie die Kartenmitte und die Zoomstufe erneut fest, nachdem Sie das Ereignis „Größe ändern“ ausgelöst haben. Weitere Informationen finden Sie unter: code.google.com/p/gmaps-api-issues/issues/detail?id=1448

    – ruhong

    5. April 2015 um 10:10 Uhr

  • @HoffZ Dies liegt wahrscheinlich daran, dass Ihr Code zur Größenänderung vor dem Anzeigeeffekt ausgelöst wird. Das Timeout verzögert ihn, bis die Show ausgeführt wird. Dann kann die Größenänderung zum Laufen gebracht werden. Sie können wahrscheinlich den gleichen Effekt erzielen, indem Sie die Ausführungsreihenfolge Ihres Codes ändern, um sicherzustellen, dass beim Auslösen des Ereignisses die div-Anzeige vor der Größenänderung der Karte ausgeführt wird.

    – Bardo

    16. September 2015 um 8:31 Uhr


Benutzeravatar von Philar
Philar

Ich habe es gerade selbst getestet und hier ist, wie ich es angegangen bin. Es ist ziemlich einfach.

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
    #map_canvas {display: none;}
</style>

JavaScript

<script>
    function displayMap()
    {
        document.getElementById( 'map_canvas' ).style.display = "block";
        initialize();
    }

    function initialize()
    {
        // Create the map
        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng( 0.0, 0.0 ),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map( document.getElementById( "map_canvas" ), myOptions );
    }
</script>

  • Im Grunde instanziieren Sie die Karte also nur, wenn das div angezeigt wird? Gibt es eine Möglichkeit, dies zu tun, damit das Kartenobjekt nur einmal instanziiert wird (beim Laden der Seite)?

    – Lukas

    14. Februar 2017 um 12:13 Uhr

  • Ich könnte auch eine setTimeout-Verzögerung vorschlagen, um die zweite Funktion aufzurufen, wenn Sie eine show() aufrufen, um Zeit für die Größenänderung zu haben.

    – Eric.18

    15. März 2017 um 17:50 Uhr

Benutzeravatar von CSN
CSN

Verwenden:

google.maps.event.trigger($("#div_ID")[0], 'resize');

Wenn Sie keine Variablen-Map zur Verfügung haben, sollte es das erste Element sein (es sei denn, Sie haben etwas Dummes gemacht) in der div die GMAP enthält.

  • Sind Sie sicher, dass Sie Element auf a auslösen können div anstelle einer google.map.Karte Objekt?

    – Salmann A

    15. April 2014 um 12:18 Uhr

  • @SalmanA – Habe das gerade überprüft und es hat bei mir funktioniert (obwohl die Karte ein neues Zentrum zu haben scheint). Aus früheren Recherchen wusste ich auch nicht, dass dies möglich ist, also ein großes Lob an CSN

    – Hal

    29. Oktober 2014 um 2:45 Uhr

  • CS N … Das funktioniert für mich, aber es lässt die Mittelposition an der falschen Stelle. Meine Karte wird wie der Screenshot des OP initialisiert, und es ist wie das Zentrum: zentriert sich auf die obere linke Ecke meiner map_canvas. Gedanken darüber, wie man es dazu bringt, zentriert zu zeichnen?

    – Kirk Roß

    5. November 2014 um 23:46 Uhr

Ich hatte eine Google-Karte in einem Bootstrap-Tab, die nicht richtig angezeigt wurde. Das war meine Lösung.

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

So aktualisieren Sie die Karte, wenn Sie die Größe Ihres div ändern

Es reicht nicht, nur anzurufen google.maps.event.trigger(map, 'resize'); Sie sollten auch die Mitte der Karte zurücksetzen.

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

Wie man auf das Größenänderungsereignis lauscht

Eckig (ng-show oder ui-bootstrap Collapse)

Binden Sie direkt an die Sichtbarkeit des Elements und nicht an den an ng-show gebundenen Wert, da $watch ausgelöst werden kann, bevor ng-show aktualisiert wird (so dass das div immer noch unsichtbar ist).

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show()

Verwenden Sie den integrierten Rückruf

$("#myMapDiv").show(speed, function() { resize(); });

Bootstrap-3-Modal

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

  • Ihre modale Bootstrap 3-Methode zur Größenänderung hat mein Problem perfekt behoben, während die meisten anderen Vorschläge dies nicht taten. Vielen Dank!

    – BrianLegg

    10. Dezember 2016 um 20:21 Uhr

Benutzeravatar von Philip
Philipp

Es ist auch möglich, nur das native Fenstergrößenänderungsereignis auszulösen.

Google Maps lädt sich automatisch neu:

window.dispatchEvent(new Event('resize'));

  • Ihre modale Bootstrap 3-Methode zur Größenänderung hat mein Problem perfekt behoben, während die meisten anderen Vorschläge dies nicht taten. Vielen Dank!

    – BrianLegg

    10. Dezember 2016 um 20:21 Uhr

Benutzeravatar von Peter Mortensen
Peter Mortensen

Wenn Sie eine Google Maps-Karte 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 nimmt einfach den Iframe-HTML-Code und fügt ihn an derselben Stelle ein, sodass er erneut gerendert wird:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQuery-Version:

$('#map-wrapper').html( $('#map-wrapper').html() );

Der HTML-Code:

<!-- .... -->
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
<!-- .... -->

Das folgende Beispiel funktioniert für eine Karte, die ursprünglich in einem Bootstrap 3-Tab versteckt war:

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the
           wrapper is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() );

    });
});
</script>

  • Beste Lösung für alle, die Google Map JS nicht laden, sondern einfach iframe mit src-URL verwenden https://www.google.com/maps/embed/v1/place?..

    – gsinha

    8. April 2015 um 3:35 Uhr

1429890cookie-checkSo laden Sie eine Google Maps-Karte in ein verstecktes Element

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy