Bootstrap v2.1.1 - 無谷歌地圖

Question

谷歌地圖不會顯示在我的頁面上。這似乎是與Twitter Bootstrap相關的問題。之後做一些研究，看來這應該解決的問題：

#map_canvas label { width: auto; display:inline; } 
#map_canvas img { max-width: none; max-height: none; } 

它確實沒有我的。我仍然沒有看到地圖。我正在使用Bootstrap v2.1.1。不確定我發現的解決方案是否適用於該版本的Bootstrap。有什麼建議麼？

Answer 1

我使用Bootstrap 2.1.1和Google地圖。下面是我的作品使用...

<div id="map_canvas"></div> 

<style> 
#map_canvas 
{ 
    width: 100%; 
    height: 450px; 
    margin: 20px 0 20px 0; 
} 
</style> 

初始化腳本...

function InitializeMap() { 
    var myOptions = { 
     zoom: 12, 
     center: myLatlng, 
     panControl: false, 
     panControlOptions: { 
     position: google.maps.ControlPosition.RIGHT_TOP 
     }, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
     position: google.maps.ControlPosition.TOP_RIGHT 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL, 
     position: google.maps.ControlPosition.RIGHT_TOP 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var marker = new google.maps.Marker({ position: myLatlng, map: myMap, title: "yyyZ, Ltd." }); 
    var contentString = "1122 N Clark Street<br />Chicago, IL 60610"; 
    var infowindow = new google.maps.InfoWindow({ content: contentString }); 
    google.maps.event.addListener(marker, 'click', function() { 
     if (lastOpenInfoWin) lastOpenInfoWin.close(); 
     lastOpenInfoWin = infowindow; 
     infowindow.open(myMap, marker); 
     myMap.setCenter(myLatlng); 
    }); 

    var trafficLayer = new google.maps.TrafficLayer(); 
    trafficLayer.setMap(myMap); 
} 

你可以看到在http://reactivewebdesign.net/Chicago/Traffic

從左側菜單中的結果，yopu也可以選擇「我在哪裏」，它使用谷歌地圖和地理位置。