谷歌地圖+助推器模式不工作調整大小

Question

嗨，大家好，我有以下問題。谷歌地圖不是針對這一點的尺寸。這是我迄今爲止編寫的代碼。我不知道爲什麼，但這個功能google.maps.event.trigger(map, "resize");，如果你把它放在單擊事件不起作用

$(function() { 
var map; 

$('.check-in').click(function(e) { 

    var coordX = $(this).data('x'), 
      coordY = $(this).data('y'); 

    initialize(coordX, coordY); 

}); 


function initialize(x, y) { 
    var map_canvas = document.getElementById('map_canvas'); 

    var myLatlng = new google.maps.LatLng(x, y); 
    var map_options = { 
     center: myLatlng, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(map_canvas, map_options); 


    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map 
    }); 

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

}）;

Answer 1

我有這樣的問題。 我解決它絲毫顯示 地圖我覺得有問題絲毫js文件衝突

Answer 2

如果我理解你的問題正確，地圖包含在引導模式中，一旦模式顯示/顯示不調整大小。

要做到這一點，你需要觸發模式的'顯示'事件的谷歌地圖調整大小事件。對於Bootsrap v3，以下內容應該可以工作。對於v2，請使用'shown'而不是'shown.bs.modal'

$('#modal').on('shown.bs.modal', function() { 
    google.maps.event.trigger(map, "resize"); 
});