How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it?

Question

I've been experimenting with the Google Maps API, but I'm having trouble with the InfoWindow... It always seems to be too small to fit the content that I place inside of it, so my content spills outside the InfoWindow and onto the map:

Info Window

It doesn't seem to make a difference if the content in the InfoWindow is dynamic or static, big or small, the white box around the content is always a little bit too small.

This is the code I'm testing:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuV-Jyz8N6b1fVUVCa1EnbPzgeCs9J5_o&sensor=true"></script>
        <script type="text/javascript">
            var districts = [
                    {
                        name: 'Test Spot 1',
                        latitude: 29.680894,
                        longitude: -82.298584
                    },
                    {
                        name: 'Test Spot 2',
                        latitude: 28.323725,
                        longitude: -80.713806
                    }
                ],
                addDistrictMarker = function(district, map, infoWindow) {
                    var position = new google.maps.LatLng(district.latitude, district.longitude),
                        marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title: district.name
                        });
                    google.maps.event.addListener(marker, 'click', function() {
                        infoWindow.close()

                        var $infoWindowContent = $(infoWindow.content),
                            $title = $infoWindowContent.find('#title');
                        $title.html(marker.title);
                        $infoWindowContent.show();
                        infoWindow.open(map, marker);
                    });
                },
                addDistrictMarkers = function(map, infoWindow) {
                    for (var i=0; i<districts.length; i++) {
                        var district = districts[i];
                        addDistrictMarker(district, map, infoWindow);
                    }
                },
                initialize = function() {
                    var mapOptions = {
                            center: new google.maps.LatLng(27.907058,-81.44165),
                            zoom: 7
                        },
                        map = new google.maps.Map(document.getElementById("map-canvas"),
                            mapOptions),
                        $infoWindowContent = $('#info-window'),
                        infoWindow = new google.maps.InfoWindow({
                            content: $infoWindowContent.get(0)
                        });
                    addDistrictMarkers(map, infoWindow);
                }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
        <div id="info-window" style="display: none;">
            <h1 id="title"></h1>
            <div id="bodyContent">
                <p>A description of some sort...</p>
                <p>
                    And a link:
                    <a href="http://foo.bar.com">http://foo.bar.com</a>
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

Is there a way I can tell Google's code to resize the InfoWindow if/when Google's code doesn't do it automatically? Or do I just have a dumb mistake in my code that is preventing google from sizing the InfoWindow correctly?

From personal experience: generate content by manually creating everything (content inside the container) using DOM helps to prevent oversizing, though I agree it's a tedious task. — 高科技黑手, Jan 23 '14 at 00:26

score 6 · Answer 1 · answered Mar 08 '14 at 23:08

6

I ended up with:

infoWindowLinea.setContent(infoWindowLinea.getContent());

just after changing the content. This forces google maps to recalculate width and height.

answered Mar 08 '14 at 23:08

Kzar

802
9
12

Anto Jurković · Answer 2 · 2014-01-22T23:11:17.927

3

My previous answer was wrong.

Problem is that you are changing property content of infoWindow without using method getcontent() and setcontent so infowindow.open() doesn't know proper size. See this little changed code which does the same as yours (hardcoded change of title):

addDistrictMarker = function(district, map, infoWindow) {
    var position = new google.maps.LatLng(district.latitude, district.longitude),
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: district.name
        });
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.close()

        var $infoWindowContent = $(infoWindow.content),
            $title = $infoWindowContent.find('#title');

        var iWC = infoWindow.getContent();

        iWC = '<div><h1>My Title</h1><div>Body something to be here><p>A description of some sort...</p><p>And a link:<a href="http://foo.bar.com">http://foo.bar.com</a></p></div></div>'


        //$title.html(marker.title);
        //$infoWindowContent.show();

        infoWindow.setContent(iWC);

        infoWindow.open(map, marker);
    });
},

Result: enter image description here

edited Jan 22 '14 at 23:11

answered Jan 22 '14 at 21:53

Anto Jurković

11,188
2
29
42

1

Where are you seeing those docs? The docs I'm looking at (https://developers.google.com/maps/documentation/javascript/infowindows#add) state that the content option "contains either a string of text *or a DOM node* to display the info window"... Regardless, even if I set it to use innerHTML, google still sizes the window too small and just places a scrollbar. – Troy Jan 22 '14 at 22:27
It is [reference](https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions). Anyway it could be `Node`. With `innerHTML` I get nice infowindow but you want title changed, as I see from the code. So my answer is wrong. I assume that it has to be something connected with changing content of infowindow after it has been created. I tried with maxWidth changes but it didn't help. – Anto Jurković Jan 22 '14 at 22:46
Using your code above, I still get scrollbars. I don't think dynamically changing content is the issue as Google IS resizing the InfoWindow when the content dynamically grows. Google just isn't resizing enough. See my other answer. – Troy Jan 22 '14 at 23:32

score 2 · Accepted Answer · answered Jan 22 '14 at 23:17

I found that explicitly setting the "height" css style of the div used as the InfoWindow content ("#info-window" for me) seems to cause google's code to size the info window correctly.

In my case, I just used jQuery to calculate and set the 'height' style after changing the div contents:

$infoWindowContent.height($infoWindowContent.height());

I still haven't figured out what causes google to size the window incorrectly in the first place... Dynamically changing the content isn't the cause since (1) static content had the same problem, and (2) Google was changing the window size if/when I dynamically changed the content, they just were just weren't changing it enough. Somehow, Google was just miscalculating the size. However, explicitly setting the css height seems to get around that.

score 1 · Answer 4 · answered Apr 26 '15 at 17:23

1

I reach the same purpose using this:

infoWindow.setContent("<div style = 'display:inline-block'>" + <YOUR_CONTENT> + "</div>");

answered Apr 26 '15 at 17:23

smartmouse

13,912
34
100
166

score 0 · Answer 5 · edited May 23 '17 at 10:27

My solution was to set the content, open the window and then when the domready event is fired, set the height CSS property on the content to whatever the height is, and then force Google Maps to resize the InfoWindow accordingly.

infoWindow is the InfoWindow object, $infoWindowContents is a Jquery object of the contents I want to put in there, map is my Map object. marker is a marker which was clicked.

infoWindow.setContent($infoWindowContents.get(0));

var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
  // Stop listening, otherwise the listeners stack up if the window is opened again
  google.maps.event.removeListener(listener);

  // Set the height on the container to however tall the browser is currently rendering it
  $infoWindowContents.height($infoWindowContents.height());

  // Force Google Maps to recalculate the InfoWindow height
  infoWindow.setContent($infoWindowContents.get(0));
});

infoWindow.open(map, marker);

(I posted the same solution over on a similar question Google Maps API v3: InfoWindow not sizing correctly)

How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it?

5 Answers5

Linked