谷歌地圖API裏面的顯示模式沒有完全顯示

我有一個谷歌地圖的問題，我有一個div，一旦按鈕點擊，彈出在屏幕上。 Google Map僅部分顯示。我知道我需要我需要創建一個resize事件，但不知道如何，或者把它放在哪裏。任何幫助將非常感激！請記住，我對JS知之甚少！谷歌地圖API裏面的顯示模式沒有完全顯示

鏈接到試驗場：點擊Google地圖按鈕，看看手頭的問題：

http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

我的谷歌API的腳本：

<script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(39.739318, -89.266507), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    } 
</script>

其中包含地圖的DIV：

<div id="myModal" class="reveal-modal large"> 
    <h2>How to get here</h2> 
    <div id="map_canvas" style="width:600px; height:300px;"></div> 
    <a class="close-reveal-modal">&#215;</a> 
</div>

按鈕cl調用地圖的腳本ICK：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myModal1').click(function() { 
      $('#myModal').reveal(); 
     }); 
    }); 
</script>

來源

2012-10-25 Jeremy Flaugher

有人請把我的額頭從桌子上砸碎..這讓我瘋狂。 –

我的前額現在正在涌血..有人快速..只有幫助這個問題將制止流血！儘管如此，這讓我瘋狂，因爲我知道這可能是一個簡單的修復。 –

你已經在這裏問過這個非常相同的問題：http://stackoverflow.com/questions/13056637/google-map-api-in-foundation-reveal-modal-not-displaying-properly – RASG

試試這個

<script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(39.739318, -89.266507), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    } 
    $(document).bind("pageshow", function(event, data){ 
     google.maps.event.trigger(map, 'resize');    
    }); 
</script>

來源

2012-10-25 03:05:12

謝謝你的回覆。不幸的是，這並沒有解決問題，地圖仍然只顯示可能的三分之一。這讓我瘋狂。 –

首先，根據鏈接，以呼籲按鈕，點擊地圖中的腳本的來源是什麼都不做，但拋出一個錯誤，因爲你在頁面有它在加載jQuery之前。你可以在錯誤控制檯中看到它。您需要將其移動到其餘腳本之後的頁面底部。

由於您在菜單項上使用了data-reveal-id屬性，並且顯示腳本自動將其連接起來，因此您的顯示「正在工作」。

您正在創建地圖onload這是不好的做法。除非需要，否則不要創建它。

所以要解決你的問題，這就是我所做的。從菜單項中刪除data-reveal-id並將其替換爲ID，或者您可以使用其他一些選擇器來訪問它。我將它更改爲id="myModal1"，因爲這是您的事件代碼中已有的。

移動你的腳本，它呼籲按鈕，點擊地圖上的底部，並改變它看起來像這樣：

$(document).ready(function() { 
var map; 
$('#myModal1').click(function() { 
    if(!map){ 
     var mapOptions = { 
      center: new google.maps.LatLng(39.739318, -89.266507), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 

     }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);   
    } 

    $('#myModal').reveal(); 
});

}）;

僅當用戶單擊鏈接以顯示鏈接並僅創建一次時，這將創建地圖。這應該爲你解決它。如果必須的話，您可以將打開的回調傳遞給reveal()調用並觸發調整大小，但在有限的測試中並不需要。

你也可以擺脫整個初始化函數。

現在去獲得一個創可貼，並在該頭上放些冰塊。

來源

2012-10-25 05:04:06 puckhead

+1，雖然實現它有點麻煩。我發佈了一個新的問題，因爲這個沒有在這裏回答我的問題http://stackoverflow.com/questions/16321577/google-maps-api-v3-foundation-4-reveal-modal-not-displaying-properly。你能幫我嗎？ – abracassabra

在<div id="map_canvas">刪除width: 600px;和觸發調整你的map打開模式應該做的伎倆後：

$(".reveal-modal").on("reveal:opened", function(e) { 
    google.maps.event.trigger(map, 'resize') 
});

來源

2013-01-25 12:54:39 defsprite

以下兩種解決方案，爲我工作

function initialize() { 
    var mapOptions = { 
    center: new google.maps.LatLng(39.739318, -89.266507), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    return map; 
} 

<div id="myModal" class="reveal-modal" data-reveal> 
    <div id="map_canvas" style="height: 300px"></div> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 


$(document).ready(function() { 
    var myMap; 
    $('#myModal').bind('open', function() { 
    if(!myMap) { 
     var myMap = initialize(); 
     setTimeout(function() { 
     google.maps.event.trigger(myMap, 'resize'); 
     }, 300);     
    } 
    }); 
}

$(document).ready(function() { 
    var myMap; 
    $('#myModal').bind('opened', function() { 
    if(!myMap) { 
     var myMap = initialize(); 
     google.maps.event.addDomListener(window, 'load', initialize); 
    } 
    }); 
});

來源

2014-01-09 10:52:48 Rohan

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

來源

2015-05-18 04:54:21 ingenious

谷歌地圖API裏面的顯示模式沒有完全顯示

回答

相關問題