Làm cách nào để thay đổi kích thước Bản đồ Google bằng JavaScript sau khi tải xong?

Tôi có một div 'mapwrap' được đặt thành 400px x 400px và bên trong tôi có một 'bản đồ' của Google được đặt thành 100% x 100%. Vì vậy, bản đồ tải ở 400 x 400px, sau đó với JavaScript, tôi thay đổi kích thước 'mapwrap' thành 100% x 100% của màn hình - bản đồ google thay đổi kích thước toàn bộ màn hình như tôi mong đợi nhưng các ô bắt đầu biến mất trước mép bên phải của trang.

Có một chức năng đơn giản nào mà tôi có thể gọi để khiến bản đồ Google điều chỉnh lại thành div 'mapwrap' có kích thước lớn hơn không?

Nếu bạn đang sử dụng Google Maps v2, hãy gọi checkResize()trên bản đồ của bạn sau khi thay đổi kích thước vùng chứa. liên kết

CẬP NHẬT

Google Maps JavaScript API v2 không được dùng nữa vào năm 2011. Nó không còn khả dụng nữa.

đối với Google Maps v3, bạn cần kích hoạt sự kiện thay đổi kích thước khác nhau:

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

Xem tài liệu về sự kiện thay đổi kích thước (bạn sẽ cần tìm từ 'thay đổi kích thước'): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Cập nhật

Câu trả lời này đã có từ lâu, vì vậy một bản demo nhỏ có thể đáng giá và mặc dù nó sử dụng jQuery, thực sự không cần thiết phải làm như vậy.

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

CẬP NHẬT 2018-05-22

Với bản phát hành trình kết xuất mới trong phiên bản 3.32 của API Maps JavaScript, sự kiện thay đổi kích thước không còn là một phần của Maplớp nữa.

Tài liệu nêu rõ

Khi bản đồ được thay đổi kích thước, trung tâm bản đồ được cố định

• Điều khiển toàn màn hình hiện nằm ở giữa.

• Không còn cần phải kích hoạt sự kiện thay đổi kích thước theo cách thủ công.

nguồn: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); không có bất kỳ hiệu ứng nào bắt đầu từ phiên bản 3.32

Câu trả lời phổ biến google.maps.event.trigger(map, "resize"); không phù hợp với riêng tôi.

Đây là một thủ thuật đảm bảo rằng trang đã được tải và bản đồ cũng đã được tải. Bằng cách thiết lập trình lắng nghe và lắng nghe trạng thái không hoạt động của bản đồ, sau đó bạn có thể gọi trình kích hoạt sự kiện để thay đổi kích thước.

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

Đây là câu trả lời của tôi đã làm việc cho tôi.

Bản đồ trong hộp của Wolfgang Pichler cung cấp cho

Tải bản đồ trong phần tử div có thể kéo và thay đổi kích thước.

Điều này tốt nhất là nó sẽ thực hiện Công việc đã hoàn thành. Nó sẽ kích thước lại Bản đồ của bạn. Không cần phải kiểm tra phần tử nữa để định kích thước lại Bản đồ của bạn. Những gì nó làm, nó sẽ tự động kích hoạt sự kiện kích thước lại.

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

Trước hết, cảm ơn đã hướng dẫn tôi và chốt vấn đề này. Tôi đã tìm ra cách để khắc phục vấn đề này từ các cuộc thảo luận của bạn. Vâng, hãy đi vào vấn đề. Vấn đề là tôi đang sử dụng trình trợ giúp GoogleMapHelper v3 trong CakePHP3. Khi tôi cố gắng mở cửa sổ bật lên của phương thức bootstrap, tôi gặp sự cố hộp màu xám trên bản đồ. Nó đã được gia hạn trong 2 ngày. Cuối cùng tôi đã sửa chữa được điều này.

Chúng tôi cần cập nhật GoogleMapHelper để khắc phục sự cố

Cần thêm tập lệnh bên dưới vào hàm setCenterMap

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

Và cần mã bao gồm bên dưới trong JavaScript

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