Nasıl yüklendikten sonra JavaScript ile Google Haritası yeniden boyutlandırmak?

SORU

13 NİSAN 2009, PAZARTESİ

Nasıl yüklendikten sonra JavaScript ile Google Haritası yeniden boyutlandırmak?

Bir 'Google' harita '100% x 100% olarak ayarlayın. ben' 400px x 400px ve içine div set mapwrap var Yani harita yükler 400 x 400px, sonra JavaScript ile ben yeniden boyutlandırma 'mapwrap' 0 x 0 ekran google haritası yeniden boyutlandırır tam ekran olarak bekliyordum ama fayans başla, ortadan kaybolmadan önce sağ kenar sayfa.

Orada daha büyük bir boyuta yeniden ayarlamaya Google haritası neden için basit bir fonksiyon 'mapwrap' div?

CEVAP

7 NİSAN 2010, ÇARŞAMBA

Google Maps v3, resize olayı farklı tetikleyici gerekir:

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

Resize olayı için belgelerine bakın (kelime aramak gerekir'') boyutlandırma: http://code.google.com/apis/maps/documentation/v3/reference.html#event

Güncelleme

Bu cevap burada uzun zaman oldu, küçük bir demo faydalı olabilir & jQuery kullanır olmasına rağmen, bunu yapmak için gerçek bir ihtiyaç 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>

Bunu Paylaş: