如何让Google地图信息窗口在所有浏览器中完美适合内容？ [英] How do I make Google Maps info windows fit the contents perfectly in all browsers?
本文介绍了如何让Google地图信息窗口在所有浏览器中完美适合内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您可以在下面的例子中看到，地图信息窗口在每个浏览器中呈现不同的内容（有时内容被切断，有时信息窗口会有滚动条）。
任何人都知道如何让我的谷歌地图信息窗口在所有浏览器中完美匹配内容？
示例html：
<！doctype html>< html>< ; head>< meta charset =utf-8>< title> test< / title>< script src =https://maps.googleapis.com/maps/api/js?v=3 < / script>< script>函数map_initialize（）{var myMapInfo = [{id：122，name：Test1 Caravan Park，latlng：new google.maps.LatLng（-38.43746,144.87258）} ，latlng：new google.maps.LatLng（-38.38098,144.91090）}，{id：123，name：Test3 Frankston Holiday Park，latlng： new google.maps.LatLng（-38.17425,145.14136）}，{id：125，name：Test4 Holiday Park，latlng：new google.maps.LatLng（-38.33165,144.98331）}，{id：124 ，名称：Test5 Port Harbour Caravan Park，latlng：new google.maps.LatLng（-38.24634,145.24469）}，]; var map = new google.maps.Map（document.getElementById（map-canvas），{center：new google.maps.LatLng（0，0），zoom：6，mapTypeId：google.maps.MapTypeId.ROADMAP， mapTypeControl：false，mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU，position：google.maps.ControlPosition.BOTTOM_LEFT}，panControl：false，panControlOptions：{position：google.maps.ControlPosition.BOTTOM_LEFT}，zoomControl：false， zoomControlOptions：{style：google.maps.ZoomControlStyle.SMALL，position：google.maps.ControlPosition.BOTTOM_LEFT}}）; //在地图上显示多个标记var infoWindow = new google.maps.InfoWindow（），marker，i;对于（var i = 0; i< myMapInfo.length; i ++）{var marker = new google.maps.Marker（{position：myMapInfo [i] .latlng，map：map，title：myMapInfo [i] .name} ）; //允许每个标记有一个信息窗口google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{infoWindow.setContent（'< div class = \ myInfoHead\>< a href = \/ caravan-parks / type / View / id /'+ myMapInfo [i] .id +'\>'+ myMapInfo [i] .name +' < / div>'）; infoWindow.open（map，marker）;}}）（marker，i））; } var latlngbounds = new google.maps.LatLngBounds（）; for（var i = 0; i< myMapInfo.length; i ++）{latlngbounds.extend（myMapInfo [i] .latlng）; } latlngbounds.extend（new google.maps.LatLng（-38.032345,145.343456））; //将Berwick Vic添加到顶部填充的latlngbounds中////绘制latlngbounds的矩形 - 方便调试// new google.maps.Rectangle（{// bounds：latlngbounds，// // map：map，// fillColor：＃000000，// fillOpacity：0.2，// strokeWeight：0 //});}google.maps.event.addDomListener(window，'load'，map_initialize）;< >< / head>< body>< div id =map-canvasstyle =width：100％; height：500px;>< / div>< / body>< / html> ;
对于任何人其他人有这个问题，你只需要重写谷歌的默认CSS像这样：
.gm-style-iw {
身高：100％！重要;
溢出：隐藏！重要;
width：auto！important;
}
重要说明：您还需要确保使用正确的javascript网址..
正确的网址：
< script src = https://maps.googleapis.com/maps/api/js?v=3\"></script>
INCORRECT URL（不幸在Google的api页面上使用 - https://developers.google.com/maps/documentation/javascript/examples/map-simple ：
< script src =https://maps.googleapis.com/maps/api/js?v=3。 exp>< / script>
You can see in the below example that the maps "info windows" render differently in every browser (sometimes the content is cut off, sometimes the info windows have scroll bars).
Anyone know how to make my Google Maps "info windows" fit the content perfectly in all browsers?
Example html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
function map_initialize() {
var myMapInfo = [
{
id: "122",
name: "Test1 Caravan Park",
latlng: new google.maps.LatLng(-38.43746, 144.87258)
},
{
id: "121",
name: "Test2 Family Holidays",
latlng: new google.maps.LatLng(-38.38098, 144.91090)
},
{
id: "123",
name: "Test3 Frankston Holiday Park",
latlng: new google.maps.LatLng(-38.17425, 145.14136)
},
{
id: "125",
name: "Test4 Holiday Park",
latlng: new google.maps.LatLng(-38.33165, 144.98331)
},
{
id: "124",
name: "Test5 Port Harbour Caravan Park",
latlng: new google.maps.LatLng(-38.24634, 145.24469)
},
];
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(0, 0),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.BOTTOM_LEFT
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
zoomControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
for (var i = 0; i < myMapInfo.length; i++) {
var marker = new google.maps.Marker({
position: myMapInfo[i].latlng,
map: map,
title: myMapInfo[i].name
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent('<div class=\"myInfoHead\"><a href=\"/caravan-parks/type/View/id/' + myMapInfo[i].id + '\">' + myMapInfo[i].name + '</a></div>');
infoWindow.open(map, marker);
}
})(marker, i));
}
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < myMapInfo.length; i++) {
latlngbounds.extend(myMapInfo[i].latlng);
}
latlngbounds.extend( new google.maps.LatLng(-38.032345,145.343456) ); //add Berwick Vic to the latlngbounds for top padding
map.fitBounds(latlngbounds);
////draw a rectangle of the latlngbounds - handy for debuging
//new google.maps.Rectangle({
// bounds: latlngbounds,
// map: map,
// fillColor: "#000000",
// fillOpacity: 0.2,
// strokeWeight: 0
//});
}
google.maps.event.addDomListener(window, 'load', map_initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:100%; height:500px;"></div>
</body>
</html>
解决方案
For anyone else having this issue you just need to override Google's default css like this:
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
width: auto !important;
}
Important Note: You will also need to make sure that you use the correct javascript url..
CORRECT URL:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
INCORRECT URL (which is unfortunately used on Google's api pages - https://developers.google.com/maps/documentation/javascript/examples/map-simple:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
这篇关于如何让Google地图信息窗口在所有浏览器中完美适合内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
