Google Map JS API - map tiles load but all images (markers, zoom control, etc.) don't load for 2 minutes
<p>I am using google maps api 3 (JS) and everything is working...sort of, there is a significant issue plaguing me from getting this released.  The map loads and displays on the page as I would expect. However all images, the zoom controls the google logo in the lower left corner and the push pin images all do not load for 2 minutes consistently every time the page loads. I have watched the page load in chrome dev tools and the entire page loads, then sits for 2 minutes then the remaining 7 images load out of the blue after 2 minutes with no other item in the list showing that it could have stalled or have been blocking the requests. I am getting the same results from PC's android phones etc. using Internet Explorer and Chrome web browsers. I have also tested this from our private network as well as other networks (personal and public) Please help. Thanks in advance!</p>

<p>Here is some of my code:</p>

<p>Generate api script in page head:</p>

<pre><code>// Setup google maps JS file
var script = document.createElement('script');
var asyncAttr = document.createAttribute('async');
var deferAttr = document.createAttribute('defer');
script.setAttributeNode(asyncAttr);
script.setAttributeNode(deferAttr);
script.setAttribute('type', 'text/javascript');
script.src = _googleMapJsPath;
document.getElementsByTagName("head")[0].appendChild(script);
</code></pre>

<p>Which generates (no key for localhost - key is present on server):</p>

<pre><code>&lt;script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
</code></pre>

<p>Then I do not use the callback in the query string as I need to wait to setup the map until required. Instead the map is initialized when needed:</p>

<pre><code>self.currentMap = new google.maps.Map(self.element, {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    scrollwheel: false
});
</code></pre>

<p>Set markers:</p>

<pre><code>$.each(newMap.points, function (index, item) {
    if (item.latitude != 0 &amp;&amp; item.longitude != 0) {
        var marker = new google.maps.Marker({
            position: {lat: item.latitude, lng: item.longitude},
            map: self.currentMap,
            optimized: false
        });

        self.markers.push(marker);
    }
});
</code></pre>

<p>Here is the HTML element:</p>

<pre><code>&lt;div id="mapDiv" class="map-container"&gt;&lt;/div&gt;
</code></pre>

<p>Here is the CSS for the class on the DIV:</p>

<pre><code>.map-container {
    width: 580px;
    height: 580px;
}
</code></pre>