Size of infoWindow in google maps api v3. What is the right solution?

Question

I have need to change width and height of google maps infoWindow and I saw this topic Google Map .InfoWindow Set Height and Width. I found that the solutions from it doesn't work. Even standart infoWindow = new google.maps.InfoWindow({maxWidth: '50px'}) isn't going to work.

So what is a solution? How to change width and height of infoWindow?

50 px is too small. See replies to this question: http://stackoverflow.com/questions/12102285/resize-the-infowindow-box-google-maps-api-v3 — Marcelo, Aug 24 '12 at 19:09

score 24 · Answer 1 · edited May 23 '17 at 12:09

24

I always use a div inside the infowindow and it works best for me. Then you just set the size of the div via css.

Here is a link. :

Google Maps API v3: InfoWindow not sizing correctly

edited May 23 '17 at 12:09

Community

1
1

answered Aug 24 '12 at 19:46

Bill Blankenship

3,316
6
43
73

1

Just to let you know, this is the better answer and should have been treated as such. Add a div inside the infowindow object, i.e. var InfoWindow = new google.maps.InfoWindow({ content: "DIV HERE" }); – Jul 23 '13 at 16:30

score 17 · Accepted Answer · answered Aug 24 '12 at 19:04

17

This works for me:

new google.maps.InfoWindow({ maxWidth: 320 });

Remove the ' ' and the px specifier and I believe it will work for you too.

answered Aug 24 '12 at 19:04

Loudenvier

8,362
6
45
66

I set new google.maps.InfoWindow({ maxWidth: 150 }); It doesn't work either. It has the exactly same size. – Alexandre Aug 24 '12 at 19:13
It works but changes the width of the content. I need to change the infoWindow. – Alexandre Aug 24 '12 at 21:37

score 9 · Answer 3 · edited Aug 30 '16 at 09:40

9

The GoogleMaps-API generates the class "gm-style-iw" around the InfoWindow. So you can simply change the size by CSS, without the need of extra markup:

var infowindow = new google.maps.InfoWindow({
    content: contentString
});


.gm-style-iw {
    height: 100px;
    width: 300px;
}

edited Aug 30 '16 at 09:40

Jai Chauhan

4,035
3
36
62

answered Oct 10 '14 at 14:41

Volker Andres

849
14
32

score 3 · Answer 4 · answered Mar 26 '14 at 19:09

3

I have added and it is working

var infowindow = new google.maps.InfoWindow({
content:'<div style="width:200px; height:100px">Some text</div>'
});

answered Mar 26 '14 at 19:09

FosAvance

2,363
9
36
52

score 2 · Answer 5 · answered Jun 04 '20 at 22:34

I know this is an old question but I would like to add a responsive solution. This will adapt nicely on small devices.

@media (max-width: 413px) {
// Set gm container to screen width leaving 20px pad on each side
  .gm-style-iw {
    width: calc(100vw - 40px)!important;
    min-width: unset!important;
    max-width: unset!important;
  }

  // Next is the container Div that you create on your infoWindow function
  // on google example var contentString = '<div id="content">'+

  .your-main-container-class {
    width: calc(100vw - 80px);
    padding: 8px 0;
    margin: auto;
  }
}

Then for bigger screens just set your width as google suggest

.your-main-container-class{
  width: 316px; // Your desire width
  padding: 8px 0 8px 8px; // Play with padding if you have a custom close button
}

score 1 · Answer 6 · edited Sep 09 '14 at 12:59

1

infowindow = new google.maps.InfoWindow({
    content: "",
    maxWidth: 200 ,
    maxHeight: 400
});

edited Sep 09 '14 at 12:59

Tasos K.

7,979
7
39
63

answered Sep 09 '14 at 12:24

Neha Sharma

15
1

Your answer should contains an explanation of your code and a description how it solves the problem. – AbcAeffchen Sep 09 '14 at 12:43
The width & height of the ifowindow can be set by using maxWidth and maxHeight – Neha Sharma Sep 09 '14 at 12:47
if u want to add style use iwContent{width:400px;} – Neha Sharma Sep 09 '14 at 12:48
Use the Edit button to improve your answer, instead of writing a comment. That way you have more chances getting upvoted. – Tasos K. Sep 09 '14 at 12:59

score 0 · Answer 7 · answered Jan 12 '16 at 19:18

0

I found that unless I forced the style with !important, it didn't work. So:

.gm-style-iw {
    height: 100px;
    width: 300px !important;
}

answered Jan 12 '16 at 19:18

dcolumbus

9,596
26
100
165

Size of infoWindow in google maps api v3. What is the right solution?

7 Answers7

Linked