Google Maps API v3 InfoWindow first appears in incorrect location, then loads correctly

Question

See this page

For some reason, in the first second of loading the map, the InfoWindow is incorrectly appearing at the left edge and then quickly appearing in the correct, middle position of the map. I want the InfoWindow to automatically be in the middle of the map whenever it is loaded. Is there any way I can fix this rough transition? Is something in my code out of order? It seems as if the loading should be smoother than this.

<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"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}]
                    };

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

            //content within the popup
            var contentString = '<div id="mapContent">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>'+
                        '<div id="bodyContent">'+
                        '<p><a href="https://maps.google.com?daddr=Blanchard+Systems+1100+Poydras+Street+New+Orleans+LA+70163">Click here for directions</a>'+
                        '<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>'+
                        '</div>'+
                        '</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       : 'Blanchard Systems'
            });

            //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>

Answer 1

Add position: centerPos, above content: contentString.

Also you should remove var myLatlng = new google.maps.LatLng(29.950217, -90.075517); since you all ready have it defined with centerPos. Don't forget to replace position : myLatlng, with position: centerPos, inside your marker variable if you do remove myLatLng.

Snippet

function initialize() {
  var centerPos = new google.maps.LatLng(29.952365, -90.075853);
  var mapOptions = {
    zoom: 13,
    center: centerPos,
    styles: [{
      "featureType": "administrative",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 33
      }]
    }, {
      "featureType": "administrative",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "administrative",
      "elementType": "labels.text",
      "stylers": [{
        "gamma": "0.75"
      }]
    }, {
      "featureType": "administrative.neighborhood",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": "-37"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "geometry",
      "stylers": [{
        "color": "#f9f9f9"
      }]
    }, {
      "featureType": "landscape.man_made",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "40"
      }, {
        "visibility": "off"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.text.fill",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "-37"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "100"
      }, {
        "weight": "2"
      }]
    }, {
      "featureType": "landscape.natural",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "80"
      }]
    }, {
      "featureType": "poi",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "0"
      }]
    }, {
      "featureType": "poi.attraction",
      "elementType": "geometry",
      "stylers": [{
        "lightness": "-4"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [{
        "color": "#c5dac6"
      }, {
        "visibility": "on"
      }, {
        "saturation": "-95"
      }, {
        "lightness": "62"
      }]
    }, {
      "featureType": "poi.park",
      "elementType": "labels",
      "stylers": [{
        "visibility": "on"
      }, {
        "lightness": 20
      }]
    }, {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "lightness": 20
      }]
    }, {
      "featureType": "road",
      "elementType": "labels",
      "stylers": [{
        "saturation": "-100"
      }, {
        "gamma": "1.00"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels.text",
      "stylers": [{
        "gamma": "0.50"
      }]
    }, {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }, {
        "gamma": "0.50"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [{
        "color": "#c5c6c6"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": "-13"
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "labels.icon",
      "stylers": [{
        "lightness": "0"
      }, {
        "gamma": "1.09"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [{
        "color": "#e4d7c6"
      }, {
        "saturation": "-100"
      }, {
        "lightness": "47"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "geometry.stroke",
      "stylers": [{
        "lightness": "-12"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry",
      "stylers": [{
        "color": "#fbfaf7"
      }, {
        "lightness": "77"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [{
        "lightness": "-5"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [{
        "saturation": "-100"
      }, {
        "lightness": "-15"
      }]
    }, {
      "featureType": "transit.station.airport",
      "elementType": "geometry",
      "stylers": [{
        "lightness": "47"
      }, {
        "saturation": "-100"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }, {
        "color": "#acbcc9"
      }]
    }, {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{
        "saturation": "53"
      }]
    }, {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [{
        "lightness": "-42"
      }, {
        "saturation": "17"
      }]
    }, {
      "featureType": "water",
      "elementType": "labels.text.stroke",
      "stylers": [{
        "lightness": "61"
      }]
    }]
  };



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

  //the marker on the map
  var marker = new google.maps.Marker({
    position: centerPos,
    map: map,
    title: 'Blanchard Systems'

  });

  //content within the popup
  var contentString = '<div id="mapContent">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>' +
    '<div id="bodyContent">' +
    '<p><a href="https://maps.google.com?daddr=Blanchard+Systems+1100+Poydras+Street+New+Orleans+LA+70163">Click here for directions</a>' +
    '<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>' +
    '</div>' +
    '</div>';


  //the info window
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: centerPos,
  });

  //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);
}

initialize();

  html,
  body,
  #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

Answer 2

Open the infowindow with your existing click event once the map is idle:

//auto open info window
google.maps.event.addListenerOnce(map, 'idle', function () {
    google.maps.event.trigger(marker, 'click');
});

fiddle

code snippet:

function initialize() {
  var myLatlng = new google.maps.LatLng(29.950217, -90.075517);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    styles: mapStyles
  };

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

  //content within the popup
  var contentString = '<div id="mapContent">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Blanchard Systems</h1>' +
    '<div id="bodyContent">' +
    '<p><a href="https://maps.google.com?daddr=Blanchard+Systems+1100+Poydras+Street+New+Orleans+LA+70163">Click here for directions</a>' +
    '<p><b>Address:</b> 1100 Poydras Street, New Orleans, LA 70163. Suite 1230.</p>' +
    '</div>' +
    '</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: 'Blanchard Systems'
  });

  //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
  google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(marker, 'click');
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
var mapStyles = [{
  "featureType": "administrative",
  "elementType": "all",
  "stylers": [{
    "visibility": "on"
  }, {
    "lightness": 33
  }]
}, {
  "featureType": "administrative",
  "elementType": "labels",
  "stylers": [{
    "saturation": "-100"
  }]
}, {
  "featureType": "administrative",
  "elementType": "labels.text",
  "stylers": [{
    "gamma": "0.75"
  }]
}, {
  "featureType": "administrative.neighborhood",
  "elementType": "labels.text.fill",
  "stylers": [{
    "lightness": "-37"
  }]
}, {
  "featureType": "landscape",
  "elementType": "geometry",
  "stylers": [{
    "color": "#f9f9f9"
  }]
}, {
  "featureType": "landscape.man_made",
  "elementType": "geometry",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "40"
  }, {
    "visibility": "off"
  }]
}, {
  "featureType": "landscape.natural",
  "elementType": "labels.text.fill",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "-37"
  }]
}, {
  "featureType": "landscape.natural",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "100"
  }, {
    "weight": "2"
  }]
}, {
  "featureType": "landscape.natural",
  "elementType": "labels.icon",
  "stylers": [{
    "saturation": "-100"
  }]
}, {
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "80"
  }]
}, {
  "featureType": "poi",
  "elementType": "labels",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "0"
  }]
}, {
  "featureType": "poi.attraction",
  "elementType": "geometry",
  "stylers": [{
    "lightness": "-4"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "geometry",
  "stylers": [{
    "color": "#c5dac6"
  }, {
    "visibility": "on"
  }, {
    "saturation": "-95"
  }, {
    "lightness": "62"
  }]
}, {
  "featureType": "poi.park",
  "elementType": "labels",
  "stylers": [{
    "visibility": "on"
  }, {
    "lightness": 20
  }]
}, {
  "featureType": "road",
  "elementType": "all",
  "stylers": [{
    "lightness": 20
  }]
}, {
  "featureType": "road",
  "elementType": "labels",
  "stylers": [{
    "saturation": "-100"
  }, {
    "gamma": "1.00"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.text",
  "stylers": [{
    "gamma": "0.50"
  }]
}, {
  "featureType": "road",
  "elementType": "labels.icon",
  "stylers": [{
    "saturation": "-100"
  }, {
    "gamma": "0.50"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry",
  "stylers": [{
    "color": "#c5c6c6"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "geometry.stroke",
  "stylers": [{
    "lightness": "-13"
  }]
}, {
  "featureType": "road.highway",
  "elementType": "labels.icon",
  "stylers": [{
    "lightness": "0"
  }, {
    "gamma": "1.09"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry",
  "stylers": [{
    "color": "#e4d7c6"
  }, {
    "saturation": "-100"
  }, {
    "lightness": "47"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "geometry.stroke",
  "stylers": [{
    "lightness": "-12"
  }]
}, {
  "featureType": "road.arterial",
  "elementType": "labels.icon",
  "stylers": [{
    "saturation": "-100"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry",
  "stylers": [{
    "color": "#fbfaf7"
  }, {
    "lightness": "77"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.fill",
  "stylers": [{
    "lightness": "-5"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "road.local",
  "elementType": "geometry.stroke",
  "stylers": [{
    "saturation": "-100"
  }, {
    "lightness": "-15"
  }]
}, {
  "featureType": "transit.station.airport",
  "elementType": "geometry",
  "stylers": [{
    "lightness": "47"
  }, {
    "saturation": "-100"
  }]
}, {
  "featureType": "water",
  "elementType": "all",
  "stylers": [{
    "visibility": "on"
  }, {
    "color": "#acbcc9"
  }]
}, {
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "saturation": "53"
  }]
}, {
  "featureType": "water",
  "elementType": "labels.text.fill",
  "stylers": [{
    "lightness": "-42"
  }, {
    "saturation": "17"
  }]
}, {
  "featureType": "water",
  "elementType": "labels.text.stroke",
  "stylers": [{
    "lightness": "61"
  }]
}];

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>