CODEWITHSUNDEEP
google-maps-api-3
Benn
Benn

Reputation: 5013

Google maps API v3 infowindow on page load wrong position

Seems like the position of the google map infobox on pageload is wrong , or at least wrong when you have your map height set at lower than 400/380px example http://jsfiddle.net/TbDzG/18/

 var startLocation = new google.maps.LatLng(36.151685,-115.152438);

function initialize() {
    var mapOptions = {
        center: startLocation,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

  var marker = new google.maps.Marker({
      position: startLocation,
      map: map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      title:"Hello World!"
  });
  var infowindow = new google.maps.InfoWindow();
infowindow.setContent('some content here');
infowindow.open(map, marker);  


}
google.maps.event.addDomListener(window, 'load', initialize);

does anyone know the trick on how to move it to the right position and center the infobox instead center the marker?

Upvotes: 1

Views: 3353

Answers (2)

geocodezip
geocodezip

Reputation: 161324

If you open the infowindow on click and trigger the click on the marker after the map finishes rendering (the 'idle' event), the map will move so the infowindow is displayed completely.

var startLocation = new google.maps.LatLng(36.151685,-115.152438);

function initialize() {
    var mapOptions = {
        center: startLocation,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
      position: startLocation,
      map: map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      title:"Hello World!"
  });
  google.maps.event.addListener(marker,'click', function(evt) {
      infowindow.setContent('some content here');
      infowindow.open(map, marker);
  });
  google.maps.event.addListenerOnce(map,'idle',function() {
      google.maps.event.trigger(marker,'click');
  });  
}
google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/YWbXE/2/

Upvotes: 1

hwsw
hwsw

Reputation: 2606

You cannot center the infowindow, because marker and infowindow (+map) have the same position.

Try this, when the map was loaded, the InfoWindow will be opened and will pan the map.

var infowindow = new google.maps.InfoWindow();
infowindow.setContent('some content here');
google.maps.event.addListenerOnce(map, 'idle', function(){infowindow.open(map, marker);  });

http://jsfiddle.net/iambnz/jAgcz/

Upvotes: 5

Related Questions