Question

Google地图未显示在我的网页上。这似乎是与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和谷歌地图。这对我有用......

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

Bootstrap v2.1.1 - 没有谷歌地图

1 个答案: