azost
azost

Reputation: 591

Maximum Infowindow width size without scroll in Google Maps v3

My markers have a content of images, but after a >600px in width Google Maps automatically add a horizontal scroll in the infowindow..what is the maximum size of infowindow in Google Maps V3? if possible how can extend the maximum size?

I dont need much more than 650/700px..

Thanks.

Upvotes: 4

Views: 4146

Answers (2)

azost
azost

Reputation: 591

Thanks for your answer Sean Mickey.

Like you said Google Maps automatically sets the maxWidth InfoWindow according to the size of map, in my case is just too small, after a lot of digging i did found two ways to bypass this, using customs infoWindows:

I´m using infoBubble, fits perfectly for my needs.

Thanks.

Upvotes: 2

Sean Mickey
Sean Mickey

Reputation: 7716

It's hard to tell without seeing your code, but it sounds like you may have placed your image within a DOM element that has a smaller width than the image? If you add the code you are using to define your info-window, your info-window-options, and your content to your question, it will be easier for others to give you more specific suggestions.

By default, an InfoWindowdev-guide is sized based on its content, which may be: text, HTML, or a DOM element. The best way to control the width of an InfoWindow is to place the content within a div and define a CSS style rule that explicitly defines a width for the div. When using the default sizing based on the size of the content, the maximum width of an InfoWindow is only limited by the width of your Map.

Your other option is the maxWidth property (measured in pixels) of the InfoWindowOptionsapi-doc object, which may be associated with an InfoWindowapi-doc by passing the options object to the info-window's constructor or by calling the InfoWindow.setOptions function after the info-window has been created. The InfoWindowOptions.maxWidth property will only be used if the options object has been associated with an info-window prior to calling the InfoWindow.open function. If you have a use case that requires you to change the value of maxWidth when you are changing the info-window's content, you must:

  1. Call InfoWindow.close
  2. Call InfoWindow.setOptions (passing in an InfoWindowOptions object with the new maxWidth value)
  3. Call InfoWindow.setContent
  4. Call InfoWindow.open to display the info-window on the Map

The Google Maps Developer's Guide includes an: example Map with the info-window maxWidth value set to 200 pixels. You may want to check that out if you are interested in using the maxWidth option and would like to explore a working Map that uses that option.

Upvotes: 2

Related Questions