Click on each item to display more information
<style>



					
					.item__map
					{
						width: 100%;
                        position:relative;
                        
                        
						float: none;
					}
					.item:nth-child( even ) .item__info
					{
						float: right;
						padding-left: 1.25rem; /* 20 */
					}
					.item:nth-child( even ) .item__map
					{
						padding-right: 1.25rem; /* 20 */
					}
					.item:nth-child( odd ) .item__info
					{
						padding-right: 1.25rem; /* 20 */
					}
					.item:nth-child( odd ) .item__map
					{
						padding-left: 1.25rem; /* 20 */
					}
					.item__map
					{
					}
						.item__map .google-map
						{
						  left:0px;
							width: 100%;
							height: 18.750rem; /* 300 */
                            height:500px;                            
						}
						.item__map .google-map:not( .is-loaded )
						{
							background-color: #ddd !important;

							-webkit-animation: fade-in-out 1s linear infinite;
							animation: fade-in-out 1s linear infinite;
						}
							@-webkit-keyframes fade-in-out
							{
								from	{ opacity: 1; }
								50%		{ opacity: 0; }
								to		{ opacity: 1; }
							}
							@keyframes fade-in-out
							{
								from	{ opacity: 1; }
								50%		{ opacity: 0; }
								to		{ opacity: 1; }
							}



		@media screen and ( max-width: 40em ) /* 640 */
		{
			.item__info,
			.item__map
			{
				width: 100% !important;
				float: none !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
			.item__map
			{
				margin-top: 1.25rem; /* 20 */
			}
		}

	</style>
    
        
		<div class="item__map" style="margin-top:20px"><div class="google-map" data-lat="0" data-lng="0"></div></div>
	</div>




<script src="//mypoeticside.com/jquery.lazy-load-google-maps.js"></script>
<script>




	;( function( $, window, document, undefined )
	{
		var $window			= $( window ),
			mapInstances	= [],
			$pluginInstance	= $( '.google-map' ).lazyLoadGoogleMaps(
			{
			     api_key: 'AIzaSyBELCmbN7apGA7j6G1-A4awiKNZqSE0KLU',
			 callback: function( container, map )
				{
			
            
            
            	    
                        var currentPopup;
            var bounds = new google.maps.LatLngBounds();
            
            
                        				    
					var $container	= $( container ),
						center		= new google.maps.LatLng( $container.attr( 'data-lat' ), $container.attr( 'data-lng' ) );
                        
                        

					map.setOptions({ zoom: 2, center: center, scrollwheel: true, mapTypeId: google.maps.MapTypeId.TERRAIN });
                    
                    map.set('styles',[{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}])
					
                    
                    
                    
                    
                    
                    
                    
                    
            
               
               
               
               
               
               function drop(lat, lng, info, title, i, k, color) {
      setTimeout(function() {
        addMarker(lat, lng, info, title, k, color);
      }, i * 500);
  }

            function addMarker(lat, lng, info, title, k, color) {

                var pt = new google.maps.LatLng(lat, lng);
                bounds.extend(pt);
                                var image = new google.maps.MarkerImage('../timeline/timeline_js/images/numbers/'+color,
      // The origin for this image is 0,0.
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(32, 37),
// The origin for this image is 0,0.
      new google.maps.Point(10,57*k));



      var marker = new google.maps.Marker({
        map: map,
        title: title,
        position: pt,
                icon: image,
        animation: google.maps.Animation.DROP
      });
                var popup = new google.maps.InfoWindow({
                    content: info,
                    maxWidth: 300
                });
                google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    currentPopup = null;
                });
            }
               
               
               
               
               center = bounds.getCenter();                 
                    

					$.data( map, 'center', center );
                    
					mapInstances.push( map );

					var updateCenter = function(){ $.data( map, 'center', map.getCenter() ); };
					google.maps.event.addListener( map, 'dragend', updateCenter );
					google.maps.event.addListener( map, 'zoom_changed', updateCenter );
					google.maps.event.addListenerOnce( map, 'idle', function(){ $container.addClass( 'is-loaded' ); });
                    
                    
                                        
				}
			});
            
            
            
            
            
            
            
            
            

		$window.on( 'resize', $pluginInstance.debounce( 1000, function()
		{
			$.each( mapInstances, function()
			{
				this.setCenter( $.data( this, 'center' ) );
                
			});
		}));

	})( jQuery, window, document );

</script>