0

I'm having some trouble getting my infowindow to have the size that I want. I'm trying to place a 15px x 15px image inside of the infowindow and have the infowindow size itself accordingly. However, it seems no matter what I do the infowindow is much much bigger than the image. Here's the code I am trying to put inside the infowindow:

<div style="width: 15px; height 15px">
  <img src="http://maps.gstatic.com/mapfiles/transit/iw/6/walk.png" width="15" height="15">
</div>

Then here's the code to make and display the window itself:

var infowindow = new google.maps.InfoWindow({
  content: window_text,
  position: GPS_coordinates,
  maxWidth: "15px"
});
infowindow.open(map);

Is there something I'm doing wrong here? Thanks for all the help!

Kara
  • 6,115
  • 16
  • 50
  • 57
jmetz
  • 815
  • 1
  • 9
  • 19

1 Answers1

1

There's a minimum size to the InfoWindow because of the graphics from which it's constructed. The minimum width is 247px, and setting maxWidth to anything less than this figure will cause the width to be 247px.

References
https://groups.google.com/forum/m/#!topic/google-maps-js-api-v3/Dnew8W5Trjg
How to size a Google Maps InfoWindow in Javascript (v3 API)

Other resources
You might try the InfoBox or the InfoBubble in the Utility library
http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

Community
  • 1
  • 1
Andrew Leach
  • 12,945
  • 1
  • 40
  • 47