Question

In Google Maps v3, I can’t seem to get my infoWindow to a width smaller than 200px. Here is the code I’m using:

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var gmarker = new google.maps.Marker({position: latLng,title:'Example'} );
var infoWindow = new google.maps.InfoWindow();
infoWindow.setOptions({maxWidth: 110});
window_content = '<div style="width:110px;height:110px;">Test</div>';
infoWindow.setContent(window_content);
infoWindow.open(myMap, gmarker);

Is there a way to get the infoWindow more narrow? Or am I stuck with a minimum width?

Answer 1

If you’re using the default, then yes, you’re fairly stuck.

You might consider using a custom infoWindow, called an infoBox. You can view one of my sandboxes here: http://www.dougglover.com/samples/UOITMap/index.html

In the maps.js, you should be able to read through and take what you need of the infoBox stuff and implement it for your own work.

This gives you FULL control over the way that your windows look.

UPDATE: Sorry, link I originally supplied is indeed dead. View here for information on infobox: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html