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

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:

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?

Answers


I ended up with:

infoWindowLinea.setContent(infoWindowLinea.getContent());

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


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:


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.


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)


I reach the same purpose using this:

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

Need Your Help

Clean way to specify options for a service when doing DI

asp.net-core

So I have a service lets say for example it's an email service on ASPNET Core.

Find first scrollable parent

javascript html5 css3

I have this situation in which I need to scroll an element into the viewport. The problem is that I don't know which element is scrollable. For example, in Portrait the body is scrollable and in