ogWemM

asynchronous-google-maps.html

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<h1>Here is my map of a particular Bay Area company</h1>
<div id="my-map"></div>

<script type="text/javascript">
	jQuery(document).ready(function($){
		
		// Grab the target map
		var $map = $('#my-map');
		
		// Initialize Google Maps
		google_maps.load_google_maps();
		
		// Once Google Maps has been loaded...
		$(document).one('google_loaded', function(){
			
			// Set the coordinates for your new marker
			var lat = 37.776847, lng = -122.416616;
			
			// Set the options for your new map
			var options = {
				country : 'us',
				zoom : 12,
				center : new google.maps.LatLng(lat, lng)
			};
			
			// Create a new Google Maps instance
			var map = new google.maps.Map($map[0], options);
			
			// Create the Map Marker and zoom out
			var markerLatlng = new google.maps.LatLng(lat, lng);
			var marker = new google.maps.Marker({
				position: markerLatlng,
				map: map
			});
			map.setZoom(10);
			
		});
		
	});
</script>

ogWemM.markdown

ogWemM

A Pen by Jeff Ward on CodePen.

License.

script.js

	/////////////////////////////
	// Load Google Maps
	/////////////////////////////
	window.google_maps = {
		loading_google_maps : false,
		api_key : 'ABQIAAAAp04yNttlQq-7b4aZI_jL5hQYPm-xtd00hTQOC0OXpAMO40FHAxQMnH50uBbWoKVHwgpklyirDEregg',
		load_google_maps : function(api_key, additional_scripts){
			jQuery(document).ready(function($){
				// Load only once
				if(typeof google != 'undefined') $(document).trigger('google_loaded'); // Trigger map ready event
				if(google_maps.loading_google_maps == true) {
					if(typeof google != 'undefined') 
						$(document).trigger('google_loaded'); // Trigger map ready event
					return false;
				}
				google_maps.loading_google_maps = true;
				
				// Initialize Google Maps
				window.initialize = function() {
					
					// Loop through & load each additional plugin
					var plugins = [
						'//google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js',
						'//www.google.com/jsapi?key=' + (api_key || google_maps.api_key)
						// ,
						// 'js/map-icons.js'
					];
					additional_scripts = (additional_scripts) ? additional_scripts : [];
					for(var i = 0; i < additional_scripts.length; i++){
						plugins.push(additional_scripts[i]);
					}
					
					// Load multiple scripts
					var getScripts = function(urls, callback) {
						var received = 0;
						var realCallback = function() { 
							received++;
							if(received === urls.length && typeof callback == 'function') callback();
						};
						for(var i = 0; i < urls.length; i++) {
							$.getScript(urls[i], realCallback);
						}
					};
					
					// Finish loading
					if(plugins.length > 0){
						getScripts(plugins, function() {
							$(document).trigger('google_loaded'); // Trigger map ready event
						});
					} else {
						$(document).trigger('google_loaded'); // Trigger map ready event
					}
					
				};
				
				// Load Google Maps
				$.ajax({
					dataType: 'script',
					data: {}, // sensor, language, apikey 
					url: '//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=initialize',
					success : function(response) {
					}, error : function(response) {
					}
				});
			});
		}
	};

style.css

	#my-map {
		position: relative;
		width: 100%;
		height: 300px;
	}