CODEWITHSUNDEEP
google-maps-api-3
Kumar
Kumar

Reputation: 113

Infowindow cut off at the top

Here is the code to demo the issue I noticed.

> JSFiddle <

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type='text/css'>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    p,h4 {
        margin:0;
    }
    #map-canvas{
        width:425px;
        height:300px;
        margin:1em;
    }
  </style>
</head>
<body>
  <div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type='text/javascript'>//<![CDATA[ 

function initialize() {
    var myLatlng = new google.maps.LatLng(-38.06794990,145.30192430);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var contentString = '<div style="width:300px;"><H4>Heading</H4><P><B>Address:</B> Community Centre 51L The Strand, Narre Warren South 3805</P></div>';

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

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Food Waste and Organics workshop'
    });
    infowindow.open(map, marker);

    google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.open(map, marker);
    });

}

google.maps.event.addDomListener(window, 'load', initialize);
//]]>  
</script>
</body>
</html>

The infowindow opens fine, when its opened with the click event. But if its done on window load event, it doesn't align the infowindow properly in the map area and the top part of the infowindow is cut off. Even increasing the height of the map div doesn't seem to help.

Thanks, Kumar.

Upvotes: 0

Views: 3198

Answers (1)

Praveen
Praveen

Reputation: 56509

Check out Google maps Docs for panTo().

map.panTo(new google.maps.LatLng(lat + your panDownValue, lon));

This is just a quick fix for your question.

JSFIDDLE 1

EDIT: I tried to trigger the marker's "click" event and it is working fine. 

google.maps.event.addListenerOnce(map, 'idle', function(){
      google.maps.event.trigger(marker,'click');
 });

idle Event fired when the map becomes idle after panning or zooming.

JSFIDDLE 2

Upvotes: 4

Related Questions