bootstrap css干扰谷歌地图infowindow v3

时间:2014-05-21 12:30:36

标签: javascript css google-maps twitter-bootstrap google-maps-api-3

我的地图上有一个标记的简单信息,

我想要默认的infowindow设计,相反我得到了丑陋的infowindow,它似乎干扰了bootstrap。

这里是小提琴http://jsfiddle.net/GTrr6/2/

的链接
var los_angeles = new google.maps.LatLng(34.0695831, -118.2634431);
var myOptions = {zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, center: los_angeles};
var map = new google.maps.Map($("#map-canvas")[0], myOptions);
var marker = new google.maps.Marker({position: los_angeles, map: map, title: "your location");

var infoWindow = new google.maps.InfoWindow({content: '<div class="iw">test info</div>'});

google.maps.event.addListener(marker, 'click', function () { infoWindow.open(map, marker); });

如果点击标记,它将显示一个信息窗口,但它看起来与谷歌地图上的默认信息窗口略有不同。

2 个答案:

答案 0 :(得分:0)

试图压制规则&#34; img {max-width:100%; }&#34;在bootstrap css中。它会导致googlemap出现问题。 如果规则不存在,那么我就不知道了。

答案 1 :(得分:0)

您有一个额外的括号,如控制台中所示: “未捕获的SyntaxError:意外的令牌”“

从以下行中删除最后一个。应该是这样的。 :)

var map = new google.maps.Map($("#map-canvas")[0], myOptions);

此主题有一个修复:https://github.com/twbs/bootstrap/issues/2410

#map-id img {
    max-width: none;
}