AJAX Lazy Load Google Maps After Page Load (doesn't affect initial page load)

After-Load-JS.js

					jQuery( window ).load(function() {
					
					// This jQuery event only triggers after the first time a user scrolls. Your map loads once they scroll. This only makes sense if the map is below the fold
						jQuery( window ).one( "scroll", function() {
					
								loadAPI();
		
						});

Lazy-Load-Google-Maps-JS.js

						<script>
						
						
							function loadAPI()
							{
								var script = document.createElement('script');
								script.src = 'https://www.google.com/jsapi?key=[your_key]]&callback=loadMaps';
								script.type = 'text/javascript';
								document.getElementsByTagName('head')[0].appendChild(script);
							}
						

							function loadMaps()
							{
								google.load('maps', '3', {callback: mapLoaded});
							}
							
							function mapLoaded()
							{
								//here you can be sure that maps api has loaded
								//and you can now proceed to render the map on page

								// do whatever map setup you need here
																		
									map = new google.maps.Map(document.getElementById('map'), {
									  center: {lat: <?php the_field('lat'); ?>, lng: <?php the_field('lon'); ?>},
									  zoom: 12,
									  scrollwheel: false,
									  mapTypeId: google.maps.MapTypeId.TERRAIN
									});
		
									var ctaLayer = new google.maps.KmlLayer(
											  '<?php the_field('gpx_file'); ?>',
											  {
												  suppressInfoWindows: true,
												  map: map,
												  preserveViewport: false
											  });  		 

									ctaLayer.setMap(map);         
		
									var geocoder = new google.maps.Geocoder();
		
									var address = '<?php echo $trailheadAddr; ?>';
		  
									geocoder.geocode( { 'address': address}, function(results, status) {
										  if (status == google.maps.GeocoderStatus.OK) {
											var marker = new google.maps.Marker({
												map: map,
												icon: '<?php echo get_template_directory_uri(); ?>/img/parking.png',
												animation: google.maps.Animation.DROP,
												position: results[0].geometry.location
											});
										  } 
									});		  		
			
			
							}			
																	
						
						
						
						</script>	

Used to lazy load below the fold Google Maps that have hiking directions and hiking maps on my blog