SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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: 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:

    HTML 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:

    Code:
    $(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':

    Code:
    <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:

    Code:
    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.

  2. #2
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);
    }
    },


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •