Question

您可以在下面的示例中看到地图“信息窗口”在每个浏览器中的呈现方式不同（有时内容被截断，有时信息窗口有滚动条）。

任何人都知道如何让我的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>
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>

Answer 1

对于遇到此问题的其他人，您只需要覆盖Google的默认css，如下所示：

.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
    width: auto !important;
}

重要说明：您还需要确保使用正确的javascript网址..

CORRECT URL：

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

INCORRECT网址（不幸在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>

如何让Google地图信息窗口在所有浏览器中完美契合内容？

1 个答案: