We Keep Coding

Google Map GroundOverlay set map bounds, zoom and center of image bounds

I am using a groundoverlay to set an image on a map but need the map to use my groundoverlay as the center of map and zoom to fit the whole ground overlay on map and center on groundoverlay. Anyone have a solution for this? Been looking for a while.
Example fiddle here
https://jsfiddle.net/abennington/qvLe3xua/18/
My js code
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
maxZoom: 17,
scrollwheel: false,
center: {lat: 29.76786111111111, lng: -95.45805833333334},
mapTypeId: 'hybrid',
zoomControl: true,
scaleControl: true,
streetViewControl: false,
mapTypeControl: false,
styles: [
{
"featureType": "all",
"elementType": "geometry.fill",
"stylers": [
{
"weight": "0.50"
}
]
},
{
"featureType": "all",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#9c9c9c"
}
]
},
{
"featureType": "all",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.government",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.school",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_complex",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
},
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#7b7b7b"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "simplified"
},
{
"gamma": "1"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#ffffff"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
}
]
}
]
});
var imageBounds = {
north: 29.770291666666665,
south: 29.765483333333332,
east: -95.4573388888889,
west: -95.46150555555556
};
var overlayOpts = {
opacity:1.0
};
historicalOverlay = new google.maps.GroundOverlay(
'http://www.houstonian.com/resources/1/CampMap-Rotated2.png',
imageBounds,overlayOpts);
historicalOverlay.setMap(map);
}

JavaScript/Angular - Issue while trying to style Google Maps using a local JSON file

I am facing a very weird issue while trying to style Google Maps.
Usually to style a Google Maps you do the following:
var styledMapType = new google.maps.StyledMapType(this.jsonData,{name: "Styled Map"});
While this.jsonData is a long JSON file. I am importing a local JSON file and try to inject it into new google.maps.StyledMapType object; however, nothing changes ! On the other hand, when I assign the content of the same local JSON file to a variable, it works and changes the style of the map. However, I wouldn't like to keep the that long JSON array on the same page of my controller.
I am using the below to import the local JSON file:
mapStyleFile(){
this.http.get("assets/json/mapStyle.json")
.map((res) => res)
.subscribe(data =>{
this.jsonData = data["_body"];
});
}
Template JSON:
[
{
"featureType": "all",
"elementType": "all",
"stylers": [
{
"hue": "#e7ecf0"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#636c81"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#636c81"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ff0000"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f1f4f6"
}
]
},
{
"featureType": "landscape",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#496271"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -70
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c6d3dc"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#898e9b"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"saturation": -60
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#d3eaf8"
}
]
}
]

You code will not detect the change of this.jsonData. You have to update your style after you load JSON.
mapStyleFile(){
this.http.get("assets/json/mapStyle.json")
.map((res) => res)
.subscribe(data => {
this.jsonData = data["_body"];
let styledMapType = new google.maps.StyledMapType(this.jsonData,{name: "Styled Map"});
});
}

Animate google maps polyline from a set of points like in animaps

I have a set or array of points (lat, lon) which represent a vehicle route or path. I want to play those points in something looks like a flash (but using javascript and google maps api), like in this page:
http://www.animaps.com/pb/161960002/1805/Piraeus_Line
or like in google maps's page:
https://www.youtube.com/watch?v=iec4fVTuNCE
I have been looking for the many tutorials but nothing gives a straight forward solution.
The problem of animaps is that I should always embed it as an iframe in my website, while I need to make this dynamic because I have positions retrieved from database.

First use the
Directions Service
to get the directions from your from > to positions.
Then create a polyline for that direction, to the polyline you can add symbols that you can animate along it's path by updating their offset.
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var polyline, symbol;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: chicago,
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#212121"
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#212121"
}]
}, {
"featureType": "administrative",
"elementType": "geometry",
"stylers": [{
"color": "#757575"
}, {
"visibility": "off"
}]
}, {
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#9e9e9e"
}]
}, {
"featureType": "administrative.land_parcel",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#bdbdbd"
}]
}, {
"featureType": "administrative.neighborhood",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#181818"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#1b1b1b"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#2c2c2c"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#8a8a8a"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#373737"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#3c3c3c"
}]
}, {
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [{
"color": "#4e4e4e"
}]
}, {
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}]
}, {
"featureType": "water",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#3d3d3d"
}]
}]
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var request = {
origin: 'chicago, il',
destination: 'peoria, il',
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status == 'OK') {
createPath(response);
}
});
}
function createPath(response) {
symbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
strokeColor: '#fff'
};
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#e91e63',
strokeWeight: 3,
icons: [{
icon: symbol,
offset: '0%'
}]
});
var bounds = new google.maps.LatLngBounds();
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.setCenter(bounds.getCenter());
animateCircle(polyline);
}
function animateCircle(line) {
var count = 0;
var icons = line.get('icons');
window.setInterval(function() {
count = (count + 1) % 200;
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 200px;
width: 100%;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>

How can I make this google map dark?

I'm using this type of code for google map location:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:280px;width:auto;">
<div id="gmap_canvas2" style="height:300px;width:auto;"></div>
<style>
#gmap_canvas2 img {
max-width:none!important;
background:none!important
}
</style>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(44.193444, 28.649466),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(44.193444, 28.649466)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constanța, România"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
And I have this theme but I don't know how to use it, or where to put it.
[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]
It's from this website https://snazzymaps.com/style/1261/dark

As described in the documentation, styles is a property of the MapOptions object that is passed in to the google.maps.Map constructor.
working fiddle
code snippet:
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(44.193444, 28.649466),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#000000"
}, {
"lightness": 40
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.country",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "administrative.province",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": "-100"
}, {
"lightness": "30"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"gamma": "0.00"
}, {
"lightness": "74"
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [{
"lightness": "3"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 21
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"visibility": "simplified"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 19
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}]
};
map = new google.maps.Map(document.getElementById("gmap_canvas2"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(44.193444, 28.649466)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Club Megalos</b><br/>B-dul Mamaia, nr.155<br/> Constanța, România"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
#gmap_canvas2 img {
max-width: none!important;
background: none!important
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div style="overflow:hidden;height:280px;width:auto;">
<div id="gmap_canvas2" style="height:300px;width:auto;"></div>

This is what you need to implement (along with their library files):
<script>styles.push({ id: 1261, name: 'Dark', json: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}] });</script>

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

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>Click here for directions'+
'<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>

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>Click here for directions' +
'<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>

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>Click here for directions' +
'<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>