ฉันจะปรับขนาด Google Map ด้วย JavaScript หลังจากโหลดได้อย่างไร

ฉันมี div 'mapwrap' ที่ตั้งค่าเป็น 400px x 400px และภายในนั้นฉันมี 'แผนที่' ของ Google ตั้งไว้ที่ 100% x 100% ดังนั้นแผนที่จะโหลดที่ 400 x 400px จากนั้นด้วย JavaScript ฉันปรับขนาด 'mapwrap' เป็น 100% x 100% ของหน้าจอ - แผนที่ google จะปรับขนาดเป็นทั้งหน้าจอตามที่ฉันคาดไว้ แต่ไทล์เริ่มหายไปก่อนที่ขอบด้านขวามือของ หน้า.

มีฟังก์ชั่นง่ายๆที่ฉันสามารถเรียกใช้เพื่อทำให้แผนที่ Google ปรับใหม่เป็น div 'mapwrap' ขนาดใหญ่ขึ้นได้หรือไม่?

หากคุณกำลังใช้ Google Maps v2 ให้โทรcheckResize()บนแผนที่ของคุณหลังจากปรับขนาดคอนเทนเนอร์ ลิงค์

อัปเดต

Google Maps JavaScript API v2 เลิกใช้งานในปี 2554 ไม่สามารถใช้งานได้อีกต่อไป

สำหรับ Google Maps v3 คุณต้องทริกเกอร์เหตุการณ์การปรับขนาดต่างกัน:

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

ดูเอกสารสำหรับเหตุการณ์การปรับขนาด (คุณจะต้องค้นหาคำว่า 'resize'): http://code.google.com/apis/maps/documentation/v3/reference.html#event

อัปเดต

คำตอบนี้อยู่ที่นี่มานานแล้วดังนั้นการสาธิตเล็กน้อยอาจคุ้มค่าและแม้ว่าจะใช้ jQuery แต่ก็ไม่จำเป็นต้องทำเช่นนั้น

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

อัพเดท 2018-05-22

ด้วยการเปิดตัว renderer ใหม่ในเวอร์ชัน 3.32 ของ Maps JavaScript API เหตุการณ์การปรับขนาดจะไม่เป็นส่วนหนึ่งของMapคลาสอีกต่อไป

เอกสารระบุ

เมื่อปรับขนาดแผนที่แล้วศูนย์แผนที่จะได้รับการแก้ไข

• ขณะนี้การควบคุมแบบเต็มหน้าจอจะรักษาศูนย์กลาง

• ไม่จำเป็นต้องทริกเกอร์เหตุการณ์ปรับขนาดด้วยตนเองอีกต่อไป

แหล่งที่มา: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); ไม่มีผลใด ๆ ตั้งแต่เวอร์ชัน 3.32

คำตอบยอดนิยมgoogle.maps.event.trigger(map, "resize");ไม่ได้ผลสำหรับฉันคนเดียว

นี่คือเคล็ดลับที่ทำให้มั่นใจได้ว่าหน้าเว็บโหลดขึ้นและแผนที่ก็โหลดเช่นกัน ด้วยการตั้งค่าผู้ฟังและการรับฟังสถานะว่างของแผนที่คุณจะสามารถเรียกทริกเกอร์เหตุการณ์เพื่อปรับขนาดได้

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

นี่คือคำตอบที่ได้ผลสำหรับฉัน

แผนที่ในกล่องของ Wolfgang Pichler เสนอให้

โหลดแผนที่ในองค์ประกอบ div ที่ลากได้และปรับขนาดได้

นี่เป็นการดีที่สุดที่จะทำให้งานสำเร็จ มันจะปรับขนาดแผนที่ของคุณใหม่ ไม่จำเป็นต้องตรวจสอบองค์ประกอบอีกต่อไปเพื่อปรับขนาดแผนที่ของคุณใหม่ สิ่งนี้จะทริกเกอร์เหตุการณ์ขนาดใหม่โดยอัตโนมัติ

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

ก่อนอื่นขอขอบคุณที่ชี้แนะฉันและปิดปัญหานี้ ฉันพบวิธีแก้ไขปัญหานี้จากการสนทนาของคุณ มาเข้าประเด็นกันเถอะ สิ่งนี้คือฉันใช้ตัวช่วย GoogleMapHelper v3 ใน CakePHP3 เมื่อฉันพยายามเปิดป๊อปอัปโมดอล bootstrap ฉันได้พบกับปัญหากล่องสีเทาบนแผนที่ ขยายเวลาออกไป 2 วัน ในที่สุดฉันก็ได้รับการแก้ไขแล้ว

เราจำเป็นต้องอัปเดต GoogleMapHelper เพื่อแก้ไขปัญหา

ต้องเพิ่มสคริปต์ด้านล่างในฟังก์ชัน setCenterMap

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

และต้องการโค้ดรวมด้านล่างใน JavaScript

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