单击标记时,我的地图上的信息窗口显示不正确。该网站在这里。
您还会注意到地图控件也未正确显示。
var map;
var locations = <?php print json_encode(di_get_locations()); ?>;
var markers = []
jQuery(function($){
var options = {
center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
for (var i=0; i < locations.length;i++) {
makeMarker(locations[i]);
}
centerMap();
});
function makeMarker(location) {
var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
var content = '';
var infowindow = new google.maps.InfoWindow(
{ content: "test",
size: new google.maps.Size(50,50),
disableAutoPan : true
});
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.open(map,marker);
});
}
function centerMap() {
map.setCenter(markers[markers.length-1].getPosition());
}
注意:我正在使用Google Maps JS V3。
答案 0 :(得分:96)
style.css中的这种格式强制解决了这个问题:
img {
height: auto;
max-width: 100%;/* <--the problem occurs here*/
}
将它添加到style.css的末尾,以在地图中应用图像的默认值:
#map_canvas img{max-width:none}
答案 1 :(得分:1)
问题可能在于您使用img{ max-width: 100%; }
作为通用名称。
在你的css中试试这个
.gmnoprint img {
max-width: none;
}
答案 2 :(得分:0)
在Magento案例中,由于与PROTOTYPE库发生冲突,谷歌地图缩放控件未显示。
答案 3 :(得分:0)
我用以下方法解决了问题:
.gmnoprint img {
max-height: none;
}
而不是max-width
。
由于
答案 4 :(得分:0)
我曾尝试过大多数互联网答案但是没有用(不工作),我添加了自定义css和地图缩放控件,也可以启用标记点击。 This answer also useful for this question
.gmnoprint{ display: block !important } .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom { display: block !important; } .gm-tilt { display: none; } .gm-iv-address{ height: 56px; }
答案 5 :(得分:0)
我也将其归结为CSS问题。就我而言,我们有一个将所有div设置为position:relative的库。重新设置为初始会弹出我们的控件。
.gm-style div {
position:initial;
}