Изменение размера окна Google Maps

У меня есть карта API V3 с окном содержимого для каждого маркера. Каждый маркер имеет информационное окно, содержащее файл .SVG. Содержимое infowindow простирается на несколько строк, но infowindow не изменяет размер, чтобы соответствовать всем этим, в результате чего появляется прокрутка, похожая на iframe. Также я не могу даже закрыть информационный windo. Есть ли кто-нибудь, помогите мне, как исправить мою проблему. Вот мой кодИзменение размера окна Google Maps

function initialize(){ 

var myCenter = new google.maps.LatLng(36.4333, -117.9509); 
var sfv = new google.maps.LatLng(34.18258, -118.43968); 
var sgv = new google.maps.LatLng(34.07959, -118.03335); 
var pasadena = new google.maps.LatLng(34.14778, -118.14452); 
var la = new google.maps.LatLng(34.05223, -118.24368); 
var oc = new google.maps.LatLng(33.71747, -117.83114); 

var imageBounds=new google.maps.LatLngBounds(
new google.maps.LatLng(36.3943, -118.1050), 
new google.maps.LatLng(36.4735, -117.8529)); 
var marker, marker1; 

var mapProp = { 
zoom:9, 
center:la, 
mapTypeId: google.maps.MapTypeId.ROADMAP} 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var marker=new google.maps.Marker({ 
position:myCenter, 
animation:google.maps.Animation.BOUNCE 
}); 

var marker1=new google.maps.Marker({ 
position:sfv, 
animation:google.maps.Animation.BOUNCE 
}); 

var marker2=new google.maps.Marker({ 
position:sgv, 
animation:google.maps.Animation.BOUNCE 
}); 

var marker3=new google.maps.Marker({ 
position:pasadena, 
animation:google.maps.Animation.BOUNCE 
}); 

var marker4=new google.maps.Marker({ 
position:la, 
animation:google.maps.Animation.BOUNCE 
}); 

var marker5=new google.maps.Marker({ 
position:oc, 
animation:google.maps.Animation.BOUNCE 
}); 

marker.setMap(map); 
marker1.setMap(map); 
marker2.setMap(map); 
marker3.setMap(map); 
marker4.setMap(map); 
marker5.setMap(map);  
var infowindow = new google.maps.InfoWindow({ 
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">' 
    }); 
var infowindow1 = new google.maps.InfoWindow({ 
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">' 
    }); 
var infowindow2 = new google.maps.InfoWindow({ 
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">' 
    }); 
var infowindow3 = new google.maps.InfoWindow({ 
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">' 
    }); 
var infowindow4 = new google.maps.InfoWindow({ 
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">' 
    }); 
var infowindow5 = new google.maps.InfoWindow({ 
    content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">' 
    }); 
    // event handlers for clicking 
google.maps.event.addListener(marker, 'click', function(){ 
    infowindow.open(googleMap,marker); 
    }); 

google.maps.event.addListener(marker1, 'click', function(){ 
    infowindow1.open(googleMap,marker1); 
    }); 

google.maps.event.addListener(marker2, 'click', function(){ 
    infowindow2.open(googleMap,marker3); 
    }); 

google.maps.event.addListener(marker3, 'click', function(){ 
    infowindow3.open(googleMap,marker3); 
    }); 

google.maps.event.addListener(marker4, 'click', function(){ 
    infowindow4.open(googleMap,marker4); 
    }); 

google.maps.event.addListener(marker5, 'click', function(){ 
    infowindow5.open(googleMap,marker5); 
    }); 
    } 

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

<body onload = "initialize()"> 
<div id="googleMap" style="width:1080px;height:650px;"></div> 
</body>

источник

2013-03-02 V_H24

Вы можете установить максимальную ширину, передавая соответствующий параметр, как описано в the docs:

var infowindow = new google.maps.InfoWindow({ 
    content: ..., 
    maxWidth: 300 
})

соответствующие документы.

Обратите внимание, что ширина не может быть ниже 247. Что касается установки высоты, для этого не существует определенного параметра. Однако вы можете использовать CSS для управления им. Просто дайте img элементы max-height стиль.

источник

2013-03-03 00:14:17

@ user603948 Если вы нашли этот ответ полезным, не забудьте пометить его как выбранный ответ. –

max_height не работает. Он не меняет высоту окна вообще –

@ user603948 Из [здесь] (http://stackoverflow.com/a/921329/875127) вы можете стилизовать его как 'div.infowindow {max-height: 250px ; Переполнение-у: авто; } '. Работает ли maxWidth? –

Изменение размера окна Google Maps

ответ

Смежные вопросы