Darryl Leung Darryl Leung - 1 month ago 25
Javascript Question

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.

Answer

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.

Comments