css - Bootstrap v2.1.1 - 没有谷歌地图

Question

Google map 没有显示在我的页面上。这似乎是与 Twitter Bootstrap 相关的问题。经过一番研究，似乎这应该可以解决问题:

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

它对我没有任何作用。我还是没看到 map 。我正在使用 Bootstrap v2.1.1。不确定我找到的解决方案是否适用于该版本的 Bootstrap。有什么建议吗？

Answer 1

我使用 Bootstrap 2.1.1 和 Google map 。这是对我有用的...

<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 还可以选择使用谷歌地图和地理位置的“我在哪里”。