Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps v3 InfoWindow Too Wide

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?

like image 339
ryan Avatar asked Nov 06 '22 14:11

ryan


1 Answers

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

like image 140
Douglas Avatar answered Nov 15 '22 12:11

Douglas