Bagaimana cara mengubah ukuran Google Map dengan JavaScript setelah dimuat?

Saya memiliki div 'mapwrap' disetel ke 400px x 400px dan di dalamnya saya memiliki 'peta' Google disetel ke 100% x 100%. Jadi peta dimuat pada 400 x 400px, kemudian dengan JavaScript saya mengubah ukuran 'mapwrap' menjadi 100% x 100% layar - peta google mengubah ukuran ke seluruh layar seperti yang saya harapkan tetapi ubin mulai menghilang sebelum tepi kanan halaman.

Apakah ada fungsi sederhana yang dapat saya panggil agar peta Google menyesuaikan kembali ke div 'mapwrap' berukuran lebih besar?

Jika Anda menggunakan Google Maps v2, panggil checkResize()peta Anda setelah mengubah ukuran penampung. tautan

MEMPERBARUI

Google Maps JavaScript API v2 sudah tidak digunakan lagi pada tahun 2011. Sudah tidak tersedia lagi.

untuk Google Maps v3, Anda perlu memicu acara pengubahan ukuran secara berbeda:

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

Lihat dokumentasi acara pengubahan ukuran (Anda harus mencari kata 'resize'): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Memperbarui

Jawaban ini sudah ada sejak lama, jadi sedikit demo mungkin bermanfaat & meskipun menggunakan jQuery, tidak perlu melakukannya.

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

UPDATE 2018-05-22

Dengan rilis perender baru di Maps JavaScript API versi 3.32, peristiwa pengubahan ukuran tidak lagi menjadi bagian dari Mapkelas.

Dokumentasi menyatakan

Saat peta diubah ukurannya, pusat peta diperbaiki

• Kontrol layar penuh sekarang mempertahankan pusat.

• Tidak perlu lagi memicu peristiwa pengubahan ukuran secara manual.

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

google.maps.event.trigger(map, "resize"); tidak berpengaruh apa pun mulai dari versi 3.32

Jawaban populer google.maps.event.trigger(map, "resize");tidak bekerja untuk saya sendiri.

Ini adalah trik yang memastikan bahwa halaman telah dimuat dan peta juga telah dimuat. Dengan menyetel listener dan mendengarkan status diam peta, Anda kemudian dapat memanggil pemicu peristiwa untuk mengubah ukuran.

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

Ini adalah jawaban saya yang berhasil untuk saya.

Penawaran peta dalam kotak Wolfgang Pichler untuk

Muat peta dalam elemen div yang bisa diseret dan diubah ukurannya.

Ini yang terbaik adalah melakukan Pekerjaan selesai. Ini akan mengubah ukuran Peta Anda. Tidak perlu memeriksa elemen lagi untuk mengubah ukuran Peta Anda. Apa yang dilakukannya secara otomatis akan memicu peristiwa ukuran ulang.

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

Pertama-tama, terima kasih telah membimbing saya dan menutup masalah ini. Saya menemukan cara untuk memperbaiki masalah ini dari diskusi Anda. Ya, mari kita langsung ke intinya. Masalahnya saya Menggunakan helper GoogleMapHelper v3 di CakePHP3. Ketika saya mencoba membuka popup modal bootstrap, saya terpukul dengan masalah kotak abu-abu di atas peta. Sudah diperpanjang selama 2 hari. Akhirnya saya bisa memperbaikinya.

Kami perlu Memperbarui GoogleMapHelper untuk memperbaiki masalah

Perlu menambahkan skrip di bawah ini dalam fungsi setCenterMap

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

Dan perlu menyertakan kode di bawah ini dalam JavaScript

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