JavaScript yüklendikten sonra bir Google Haritasını nasıl yeniden boyutlandırabilirim?

400px x 400px olarak ayarlanmış bir "mapwrap" div var ve bunun içinde% 100 x% 100 olarak ayarlanmış bir Google "haritam" var. Bu yüzden harita 400 x 400 piksel boyutunda yükleniyor, ardından JavaScript ile 'mapwrap'ı ekranın% 100 x% 100'üne yeniden boyutlandırıyorum - google haritası beklediğim gibi tüm ekrana yeniden boyutlandırılıyor, ancak döşemeler ekranın sağ kenarından önce kaybolmaya başlıyor sayfa.

Google haritasının daha büyük 'mapwrap' div boyutuna yeniden ayarlanmasını sağlamak için arayabileceğim basit bir işlev var mı?

Google Haritalar v2 kullanıyorsanız checkResize(), kapsayıcıyı yeniden boyutlandırdıktan sonra haritanızdan arayın . bağlantı

GÜNCELLEME

Google Maps JavaScript API v2, 2011'de kullanımdan kaldırıldı. Artık mevcut değil.

Google Haritalar v3 için yeniden boyutlandırma etkinliğini farklı şekilde tetiklemeniz gerekir:

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

Yeniden boyutlandırma etkinliğinin belgelerine bakın ('yeniden boyutlandır' kelimesini aramanız gerekir): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Güncelleme

Bu cevap uzun zamandır burada, bu yüzden küçük bir demo faydalı olabilir ve jQuery kullanmasına rağmen, buna gerçekten gerek yok.

$(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>

GÜNCELLEME 2018-05-22

Haritalar JavaScript API'sinin 3.32 sürümündeki yeni bir oluşturucu sürümüyle yeniden boyutlandırma etkinliği artık Mapsınıfın bir parçası değildir .

Dokümantasyon durumları

Harita yeniden boyutlandırıldığında, harita merkezi sabitlenir

• Tam ekran kontrolü artık merkezi koruyor.

• Artık yeniden boyutlandırma olayını manuel olarak tetiklemeye gerek yoktur.

kaynak: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 3.32 sürümünden itibaren herhangi bir etkisi yoktur.

Popüler cevap google.maps.event.trigger(map, "resize");benim için tek başına işe yaramadı.

İşte sayfanın yüklendiğini ve haritanın da yüklendiğini garanti eden bir numara. Bir dinleyici ayarlayarak ve haritanın boşta durumunu dinleyerek, yeniden boyutlandırmak için olay tetikleyicisini çağırabilirsiniz.

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

Bu benim için işe yarayan cevabımdı.

Wolfgang Pichler'in kutusundaki harita teklifleri

Bir haritayı sürüklenebilir ve yeniden boyutlandırılabilir bir div öğesine yükleyin.

Yapılan İşi yapması en iyisi budur. Haritanızı yeniden boyutlandıracak. Artık Haritanızı yeniden boyutlandırmak için öğeyi incelemenize gerek yok. Yaptığı şey, yeniden boyutlandırma olayını otomatik olarak tetikleyecektir.

    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 );

Öncelikle bana rehberlik ettiğiniz ve bu konuyu kapattığınız için teşekkürler. Bu sorunu tartışmalarınızdan çözmenin bir yolunu buldum. Evet, noktaya gelelim. Sorun şu ki CakePHP3'te GoogleMapHelper v3 yardımcısını kullanıyorum. Önyükleme kalıcı açılır penceresini açmaya çalıştığımda, harita üzerinde gri kutu sorunu ile karşılaştım. 2 gün uzatıldı. Sonunda bunu düzelttim.

Sorunu düzeltmek için GoogleMapHelper'ı güncellememiz gerekiyor

SetCenterMap fonksiyonuna aşağıdaki betiği eklemeniz gerekir

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

Ve JavaScript'e aşağıdaki kodu dahil etmelisiniz

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