CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Darryl Leung
Darryl Leung

Reputation: 51

Google Maps API v3 Loading Only After Page Refresh

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.

Upvotes: 4

Views: 16605

Answers (6)

Umer Qureshi
Umer Qureshi

Reputation: 1766

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.

Upvotes: 2

mmauzerr
mmauzerr

Reputation: 51

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

Upvotes: 5

Chong Lip Phang
Chong Lip Phang

Reputation: 9279

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.

Upvotes: 0

Darryl Leung
Darryl Leung

Reputation: 51

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.

Upvotes: 1

astupidname
astupidname

Reputation: 1847

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

Upvotes: 4

Marikkani Chelladurai
Marikkani Chelladurai

Reputation: 1430

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

Upvotes: 1

Related Questions