How to access initialize function when loading Google Maps asynchronously

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:

I’m using [B]Enquire[/B] 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: and here: 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=",151.20699&zoom=15&markers=-33.867487,151.20699&size=640x400&sensor=false" alt="Map of Sydney, NSW">
			<a href=",+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>


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

		deferSetup: true,

		setup: function() {

			mapDynamicContainer.load('/includes/scripts/adaptive-google-map.php', function() {
		// Not palm size viewport
		match: function() {

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

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

<div id="map_canvas"></div>
	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">'+
						'<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>'
		var infowindow = new google.maps.InfoWindow({
			content: contentString
		google.maps.event.addListener(marker, 'click', function() {,marker);
		// Center Google Maps on browser resize (
		var center;
		function calculateCenter() {
			center = map.getCenter();
		google.maps.event.addDomListener(map, 'idle', function() {
		google.maps.event.addDomListener(window, 'resize', function() {

I found that this fixes it: () {
	setTimeout(function() {
	}, 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.

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

match: function() {
if( typeof(map) != ‘undefined’){
var center = map.getCenter();
google.maps.event.trigger(map, “resize”);