如何使Google地圖信息窗口在所有瀏覽器中完美適合內容？

您可以在下面的示例中看到，地圖「信息窗口」在每個瀏覽器中呈現不同的內容（有時內容被切斷，有時信息窗口有滾動條）。如何使Google地圖信息窗口在所有瀏覽器中完美適合內容？

任何人都知道如何讓我的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() { 
 
\t var myMapInfo = [ 
 
\t \t { 
 
\t \t \t id: "122", 
 
\t \t \t name: "Test1 Caravan Park", 
 
\t \t \t latlng: new google.maps.LatLng(-38.43746, 144.87258) 
 
\t \t }, 
 
\t \t { 
 
\t \t \t id: "121", 
 
\t \t \t name: "Test2 Family Holidays", 
 
\t \t \t latlng: new google.maps.LatLng(-38.38098, 144.91090) 
 
\t \t }, 
 
\t \t { 
 
\t \t \t id: "123", 
 
\t \t \t name: "Test3 Frankston Holiday Park", 
 
\t \t \t latlng: new google.maps.LatLng(-38.17425, 145.14136) 
 
\t \t }, 
 
\t \t { 
 
\t \t \t id: "125", 
 
\t \t \t name: "Test4 Holiday Park", 
 
\t \t \t latlng: new google.maps.LatLng(-38.33165, 144.98331) 
 
\t \t }, 
 
\t \t { 
 
\t \t \t id: "124", 
 
\t \t \t name: "Test5 Port Harbour Caravan Park", 
 
\t \t \t latlng: new google.maps.LatLng(-38.24634, 145.24469) 
 
\t \t }, 
 
\t ]; 
 
\t var map = new google.maps.Map(document.getElementById("map-canvas"), { 
 
\t \t center: new google.maps.LatLng(0, 0), 
 
\t \t zoom: 6, 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
\t \t mapTypeControl: false, 
 
\t \t mapTypeControlOptions: { 
 
\t \t style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
 
\t \t position: google.maps.ControlPosition.BOTTOM_LEFT 
 
\t \t }, 
 
\t \t panControl: false, 
 
\t \t panControlOptions: { 
 
\t \t \t position: google.maps.ControlPosition.BOTTOM_LEFT 
 
\t \t }, 
 
\t \t zoomControl: false, 
 
\t \t zoomControlOptions: { 
 
\t \t style: google.maps.ZoomControlStyle.SMALL, 
 
\t \t position: google.maps.ControlPosition.BOTTOM_LEFT 
 
\t \t } 
 
\t }); 
 
\t 
 
\t // Display multiple markers on a map 
 
\t var infoWindow = new google.maps.InfoWindow(), marker, i; 
 

 
\t for (var i = 0; i < myMapInfo.length; i++) { 
 

 
\t \t var marker = new google.maps.Marker({ 
 
\t \t \t position: myMapInfo[i].latlng, 
 
\t \t \t map: map, 
 
\t \t \t title: myMapInfo[i].name 
 
\t \t }); 
 
\t \t 
 
\t \t // Allow each marker to have an info window  
 
\t \t google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
\t \t return function() { 
 
\t \t \t infoWindow.setContent('<div class=\"myInfoHead\"><a href=\"/caravan-parks/type/View/id/' + myMapInfo[i].id + '\">' + myMapInfo[i].name + '</a></div>'); 
 
\t \t \t infoWindow.open(map, marker); 
 
\t \t } 
 
\t \t })(marker, i)); 
 
\t \t 
 
\t } 
 
\t var latlngbounds = new google.maps.LatLngBounds(); 
 
\t for (var i = 0; i < myMapInfo.length; i++) { 
 
\t \t latlngbounds.extend(myMapInfo[i].latlng); 
 
\t } 
 

 
latlngbounds.extend(new google.maps.LatLng(-38.032345,145.343456)); //add Berwick Vic to the latlngbounds for top padding 
 

 
\t map.fitBounds(latlngbounds); 
 

 
////draw a rectangle of the latlngbounds - handy for debuging 
 
\t //new google.maps.Rectangle({ 
 
\t // bounds: latlngbounds, 
 
\t // map: map, 
 
\t // fillColor: "#000000", 
 
\t // fillOpacity: 0.2, 
 
\t // strokeWeight: 0 
 
\t //}); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', map_initialize); 
 
</script> 
 
</head> 
 

 
<body> 
 
<div id="map-canvas" style="width:100%; height:500px;"></div> 
 
</body> 
 
</html>

來源

2014-10-29 MWD

其他任何人有這個問題，你只需要重寫谷歌的默認CSS是這樣的：

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

重要提示：您還需要確保您使用正確的JavaScript網址..

正確的網址：

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

不正確的URL（這是不幸的是谷歌的API頁面上使用 - https://developers.google.com/maps/documentation/javascript/examples/map-simple：

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

來源

2014-10-29 20:17:56 MWD

的「不正確的URL」是實驗版本。如果有問題，並且沒有確定，最終該版本將成爲發佈版本，並且您的「修復」將停止工作。 – geocodezip 2014-10-29 20:55:47

我知道這是實驗性的版本，這就是爲什麼它不應該用於現場或谷歌API文檔，因爲大多數人只是複製和粘貼他們.. – MWD 2014-10-30 01:10:19

如何使Google地圖信息窗口在所有瀏覽器中完美適合內容？

回答

相關問題