Wie ändere ich die Größe einer Google Map mit JavaScript, nachdem sie geladen wurde?

Question

Ich habe ein 'mapwrap' div auf 400px x 400px eingestellt und innerhalb von diesem habe ich eine Google Map auf 100% x 100% gesetzt. Die Karte wird also mit 400 x 400 px geladen, dann wird mit JavaScript die Mapwrap auf 100% x 100% des Bildschirms angepasst - die Google Map passt sich wie erwartet an den gesamten Bildschirm an, aber die Kacheln verschwinden vor dem rechten Rand der Karte Seite.

Gibt es eine einfache Funktion, die ich aufrufen kann, um die Google-Karte auf die größere 'mapwrap' div anzupassen?

Answer 1

Wenn Sie Google Maps v2 verwenden, rufen Sie nach der Größenänderung des Containers checkResize() auf Ihrer Karte auf. link

Answer 2

Wolfgang Pichler map-in-a-box Angebote

Legen Sie eine Karte in einem ziehbar und veränderbare div-Element.

Answer 3

für Google Maps v3, müssen Sie anders das Resize-Ereignis auszulösen:

google.maps.event.trigger(map, "resize"); 

finden Sie in der Dokumentation für das Resize-Ereignis (Sie werden nach dem Wort suchen müssen 'die Größe'): http://code.google.com/apis/maps/documentation/v3/reference.html#event

---

aktualisieren

Diese Antwort hat Biene n hier eine lange Zeit, so eine kleine Demo könnte sich lohnen & obwohl es jQuery verwendet, gibt es keine wirkliche Notwendigkeit, dies zu tun.

$(function() { 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(-34.397, 150.644) 
 
    }; 
 
    var map = new google.maps.Map($("#map-canvas")[0], mapOptions); 
 

 
    // listen for the window resize event & trigger Google Maps to update too 
 
    $(window).resize(function() { 
 
    // (the 'map' here is the result of the created 'var map = ...' above) 
 
    google.maps.event.trigger(map, "resize"); 
 
    }); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map-canvas { 
 
    min-width: 200px; 
 
    width: 50%; 
 
    min-height: 200px; 
 
    height: 80%; 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script> 
 
Google Maps resize demo 
 
<div id="map-canvas"></div>

Answer 4

Die beliebte Antwort google.maps.event.trigger(map, "resize"); nicht für mich allein arbeiten.

Hier war ein Trick, der sicherstellte, dass die Seite geladen wurde und dass die Karte ebenfalls geladen wurde. Wenn Sie einen Listener einstellen und auf den Ruhezustand der Karte warten, können Sie den Ereignisauslöser aufrufen, um die Größe zu ändern.

$(document).ready(function() { 
    google.maps.event.addListener(map, "idle", function(){ 
     google.maps.event.trigger(map, 'resize'); 
    }); 
}); 

Das war meine Antwort, die für mich funktionierte.

Answer 5

Dies ist am besten, es wird die Arbeit erledigt. Es wird Ihre Karte neu skalieren. Sie müssen das Element nicht mehr überprüfen, um die Größe der Karte zu ändern. Was es tut, löst automatisch ein erneutes Größen-Event aus.

google.maps.event.addListener(map, "idle", function() 
     { 
      google.maps.event.trigger(map, 'resize'); 
     }); 

     map_array[Next].setZoom(map.getZoom() - 1); 
    map_array[Next].setZoom(map.getZoom() + 1); 

Answer 6

Zunächst einmal vielen Dank für mich Führung und dieses Problem zu schließen. Ich habe einen Weg gefunden, dieses Problem aus Ihren Diskussionen zu lösen. Ja, kommen wir zum Punkt. Die Sache ist, ich benutze GoogleMapHelper v3 Helfer in CakePHP3. Als ich versuchte, bootstrap modales Popup zu öffnen, wurde ich mit dem grauen Kastenproblem über der Karte geschlagen. Es wurde für 2 Tage verlängert. Endlich habe ich eine Lösung gefunden.

Wir brauchen die GoogleMapHelper zu aktualisieren, um das Problem

Notwendigkeit zu beheben, um das unten Skript in setCenterMap Funktion

google.maps.event.trigger({$id}, \"resize\"); 

Und müssen die umfassen unter Code in JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){ 
    setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
    {$this->defaultLongitude})); 
});