How to access initialize function when loading Google Maps asynchronously

[crite70]

I'm a total JS noob so bear with me.

I have an adaptive Google map solution where for non-mobile viewports I conditionally load in the full Google map API and mobile viewports get static Google map image, basically similar to this: http://codepen.io/bradfrost/full/tLxAs.

I'm using Enquire library to handle the different states between viewports (mobile vs. non-mobile). I'm hiding/showing the relevant maps in each state via jQuery's hide() / show(), there's a common problem with the Google map API when it's in a hidden element, see here: http://blog.codebusters.pl/en/entry/...-in-hidden-div and here: http://dougmolineux.com/wp/?p=242. I can't apply the common fixes as I think it's because I'm loading the Google map API asynchronously? Everything else works fine it's just when I go from non-mobile -> mobile -> non-mobile viewport the Google Map API won't load properly i.e. only loads 1 tile which is because it was in a hidden div element when in mobile viewport.

Here's my code:

<div class="map">
			<div class="map__static">
				<img src="http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&zoom=15&markers=-33.867487,151.20699&size=640x400&sensor=false" alt="Map of Sydney, NSW">
			</div>
			<a href="http://maps.google.com.au/maps?q=Sydney,+New+South+Wales&hl=en&sll=-25.335448,135.745076&sspn=65.633852,135.263672&oq=Sydney&hnear=Sydney+New+South+Wales&t=m&z=10">View map</a>
		</div>

JS:

$(function() {
			
	var mapContainer = $('.map'),
		mapStaticContainer = $('.map__static'),
		mapDynamicContainer = $('<div class="map__dynamic"/>');
	
	enquire.register('screen and (min-width: 40em)', {

		deferSetup: true,

		setup: function() {

			mapContainer.prepend(mapDynamicContainer);
			mapDynamicContainer.load('/includes/scripts/adaptive-google-map.php', function() {
				$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyAywjPmf5WvWh_cIn35NwtIk-gYuwu1I2Q&sensor=false&callback=initialize');
			});
			
		},
		
		// Not palm size viewport
		match: function() {

			mapStaticContainer.hide();
			mapDynamicContainer.show();
			
		},
		
		// Palm size viewport
		unmatch: function() {
 
			mapStaticContainer.show();
			mapDynamicContainer.hide();
			
		}
		
	}, true).listen();
	
});

Contents of '/includes/scripts/adaptive-google-map.php':

<div id="map_canvas"></div>
<script>
	function initialize() {
		var myLatlng = new google.maps.LatLng(-33.867487,151.20699);
		var myOptions = {
		  zoom: 15,
		  center: myLatlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  scrollwheel: false
		}
		var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
		var marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			animation: google.maps.Animation.DROP
		});
		var contentString = 
			'<div class="infowindow">'+
				'<div>'+
						'<p class="flush"><strong>SALES OFFICE:</strong><br>1/16 M. 5<br>Tambol Cherngthaley<br>Amphur Thalang<br>Phuket, 83110.<br>See <a href="contact">contact</a> page.</p>'
				'</div>'+
			'</div>'
		;
		var infowindow = new google.maps.InfoWindow({
			content: contentString
		});
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(map,marker);
		});
		// Center Google Maps on browser resize (http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
		var center;
		function calculateCenter() {
			center = map.getCenter();
		}
		google.maps.event.addDomListener(map, 'idle', function() {
			calculateCenter();
		});
		google.maps.event.addDomListener(window, 'resize', function() {
			map.setCenter(center);
		});
	}
</script>

I found that this fixes it:

mapDynamicContainer.show(function () {
	setTimeout(function() {
		initialize(); 
	}, 300);
});

But it throws a JS error: initialize is not defined.

So I think what's wrong is I cannot access initialize(); function as it doesn't exist in the scope of my global JS file?? Any suggestions.

[crite70]

I managed to fix it, I needed this in the `match` function:

match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
if( typeof(map) != 'undefined'){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
},