Google Maps API v3 Loading Only After Page Refresh

Question

I'm fiddling around with the Google Maps API for a webpage I'm working on. My issue right now is, the map loads exactly as I intend it to but only after refreshing the page. If I do not refresh the page, all I see is the canvas. The problem remains if I leave the page and return to it so it appears to be an issue with calling for the map to initialize.

The code:

<style>
    #map_canvas {
    width: 670px;
    height: 400px;
    background-color: #CCC;
    }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    function initialize() {

        var myLatLng = new google.maps.LatLng(31.247681, 121.449504);

        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
        center: new google.maps.LatLng(31.248195, 121.447431),
        zoom: 16,
                mapTypeControl: false,
                panControl: false,
        zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(map_canvas, map_options);

        var contentString =
            '<b>Leung Gallery</b>' +
            '<p>50 Moganshan Rd. Building 7, Unit 108, Shanghai</p>' +
            '<p>&#19978;&#28023;&#26222;&#38464;&#21306;&#33707;&#24178;&#23665;&#36335;50&#21495;7&#21495;&#27004;108&#23460;</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

        google.maps.event.trigger(map, 'resize');

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map,marker);
        });

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>​

Browsing through previous questions, I haven't found anything that matched my problem exactly but I've seen some similar situations that revolved around google.maps.event.addDomListener(window, 'load', initialize); so I'm thinking that might be where the issue is. Any help is appreciated.

Edit: Got pointed in the right direction. Adding $(document).bind("projectLoadComplete", initialize); after google.maps.event.addDomListener(window, 'load', initialize); fixes the issue. The issue was that the pages were not fully loading when using the navigation. This issue is probably exclusive to the Cargo Collective platform.

Answer 1

After several hours of unsuccessful search for a solution finally I found this:

Just replace:

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

with:

$(document).ready(function(){
  initialize();
});

Answer 2

It seems to work fine for me in Firefox, but not in Internet Exploder. In IE the first view of the page the map does not load. I am pretty certain that it has got to do with the way the page is being built. When I view source in IE and do a search for the text "map_canvas" (which is of course the id of your div for the map to display in) I am not able to find a div or any html element with that id within the raw page source for some reason, and I have not actually figured out how it's being added in to the page. But, the div does show up in Developer Tools as an empty xml element: <div id="map_canvas" /> which upon subsequent refresh of the page it gets filled in. This leads me to believe that whatever other code you have which must be adding that div to the page dynamically it is running after your map initialization script. So, if you have the ability to move your initialize map script the best place to put it would be immediately before the closing </body> tag. If it still does not work properly then, you may want to try and delay your initialize script from running even a bit more, try:

google.maps.event.addDomListener(
    window,
    'load',
    function () {
         //1000 milliseconds == 1 second,
         //play with this til find a happy minimum delay amount
        window.setTimeout(initialize, 1000);
    }
);

Answer 3

In API version 3 call

google.maps.event.trigger(map, 'resize')

or for version 2

map.checkResize()

Make sure you call google.maps.event.trigger(map, 'resize') BEFORE calling map.fitBounds() or you will get unexpected results.

Answer 4

I have checked this and its working fine for me. Please checkout the fiddle http://jsfiddle.net/aCx6L/

Answer 5

Got pointed in the right direction. Adding $(document).bind("projectLoadComplete", initialize); after google.maps.event.addDomListener(window, 'load', initialize); fixes the issue. The issue was that the pages were not fully reloading when using the navigation. This issue is probably exclusive to the Cargo Collective platform. I am guessing it is a decision they made to make the page transitions faster.

Answer 6

After trying out various suggestions and failed, I found that the following works for me:

try {google;} catch (e){location.reload();}

You should add this just before the creating the map.

I know this may not be the best solution as it incurs extra load on the server.

I also found out that the map can load correctly the first time round in Internet Explorer The Edge but not in Google Chrome.