Take a look at this page
Upon loading the map, there seems to be an issue where the InfoWindow initially appears on the left edge before quickly transitioning to the correct center position. Is there a way to ensure that the InfoWindow is always centered when the map loads? It appears that the transition could be smoother and more seamless, is there a problem with my code causing this rough transition?
<div id="map-canvas"></div>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(29.950217, -90.075517);
var centerPos = new google.maps.LatLng(29.952365, -90.075853);
var mapOptions = {
zoom : 15,
center : centerPos,
styles : [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//content within the popup
var contentString = '<div id="mapContent">'+
'Place your content here'+
'</div>';
//the info window
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//the marker on the map
var marker = new google.maps.Marker({
position : myLatlng,
map : map,
title : 'Marker Title'
});
//when clicking the marker, open the info window
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
//auto open info window
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
// end google maps
</script>