Google Maps Info window resizing

Question

I have a API V3 map, with a content window for each marker. Each marker has an info window containg a .SVG file. The content of the infowindow stretches across multiple lines, but the infowindow does not resize to fit it all, causing an iframe-like scroll to appear. Also i can't even close the info windo. Is there anyone help me how to fix my problem. Here is my code

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>

score 2 · Answer 1 · answered Mar 03 '13 at 00:14

2

You can set a max width by passing in the relevant parameter, as discussed in the docs:

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

relevant docs.

Note that the width can't go below 247. As for setting the height, there isn't a specific parameter for that. You can use CSS to control it, though. Just give the img elements a max-height styling.

answered Mar 03 '13 at 00:14

Cianan Sims

3,419
1
21
30

@user603948 If you found this answer helpful, don't forget to mark it as the selected Answer. – Cianan Sims Mar 03 '13 at 00:47
the max_height doesn't work. It doesn't change the height of the window at all – V_H24 Mar 03 '13 at 04:12
@user603948 From [here](http://stackoverflow.com/a/921329/875127), you can style it like `div.infowindow { max-height:250px; overflow-y:auto; }`. Did the maxWidth work? – Cianan Sims Mar 03 '13 at 04:16
where do i need to put? div.infowindow { max-height:250px; overflow-y:auto; } – V_H24 Mar 03 '13 at 05:20
That's a CSS style rule so put it in a ` – Cianan Sims Mar 03 '13 at 06:31

Google Maps Info window resizing

1 Answers1

Linked