CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Pete Williams
Pete Williams

Reputation: 221

Google Maps (V3) InfoWindow not resizing properly

For some reason, I can not get Google Maps to resize its popup box to the correct dimensions. Instead it puts it inside a smaller box with scroll bars.

I've stripped my problem down to a barebones example at http://petewilliams.info/stupidmap.html

I've tried Googling and trying all the suggestions so far, but nothing seems to work.

Any ideas would be grateful received!

Code is as below:

<!doctype html>
<head>
    <meta charset="utf-8">
    <style>
        #map div#pop {
        border:     1px solid red;
        height:        80px;
        width:         275px;
        }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">

        function initialiseMap() {
            // Load MAP
            var latlng = new google.maps.LatLng(51.2367, -0.57177);
            var myOptions = {
                zoom: 13,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(51.2367, -0.57177),
              map: map,
              title:'test item'
            });

            var infowindow = new google.maps.InfoWindow({
                content: "<div id=\"pop\">This is not 275x80px</div>",
                maxWidth: 325

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

    </script>
</head>
<body onload="initialiseMap();">

  <div id="map" style="width:580px; height:600px">Loading Map&hellip;</div>

</body>
</html>

Thanks

Pete

Upvotes: 1

Views: 5341

Answers (2)

feedmeastraycat
feedmeastraycat

Reputation: 11

For someone else who might read here. P tags seams to mess with the auto resize as well. I followed a bunch of these instructions but nothing helped. I still got a scrollable div instead of a larger bubble. Changing my p tags to div tags (within a div container) helped though.

Upvotes: 0

Jonathan
Jonathan

Reputation: 5993

Looks like the definition is applied after the Google Maps API calculates the size of the infoWindow. When I remove #map from the CSS declaration it sizes properly.

<style>
    div#pop {
    border:     1px solid red;
    height:     80px;
    width:      275px;
    }
</style>

Upvotes: 11

Related Questions