Google Maps API3 - Multiple markers and Infowindow with custom content and gallery, using Geocode

google_map_api3_multiple_locations_infowindow_with_html_gallery.js

<div id="map"></div>

<script type="text/javascript">
	$(document).ready(function () {
			
			// You can add as many locations as you like, formatting it in the same order
			var locations = [
				['Name', 'Address', 'Custom Content'],
				['Name 2', 'Address 2', 'Custom Content 2']
			];
	
			// You can add as many galleries as there are locations, keeping the same order and formatting
			var galleries = [
				['https://site.com/img.jpg', 'https://site.com/img2.jpg'],
				['https://site2.com/img.jpg', 'https://site2.com/img2.jpg']
			];

			var map = new google.maps.Map(document.getElementById('map'), {
				zoom: 15,
				center: new google.maps.LatLng(43.7692896,11.2547402),
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				disableDefaultUI: true,
				clickableIcons: false
			});
			var pin = {
				url: 'assets/img/Pin.svg',
				origin: new google.maps.Point(0, 0),
			};
			var pin_selected = 'assets/img/Selected.svg';
			var shadow = {
				url: 'https://dl.dropboxusercontent.com/u/814783/fiddle/shadow.png',
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(-1, 36)
			};
			var infowindow = new google.maps.InfoWindow({ 
				maxWidth: 400,
				content: "Loading...",
			});
			var bounds = new google.maps.LatLngBounds();
			var geocoder = new google.maps.Geocoder();

			var marker, i, selectedMarker;

			for (i = 0; i < locations.length; i++) {				
				geocodeAddress(locations[i], galleries[i]);
			}

			function geocodeAddress(location, gallery) {
			
				// Prepare Window content
				var infowindow_content = '<div class="marker_wrap"><p class="marker_title">' + location[0] + '</p><p class="marker_address">' + location[1] + '</p><p class="marker_content">' + location[2] + '</p><div class="marker_gallery">';
				
				// Location Gallery
				for (x = 0; x < gallery[0].length; x++) {
					infowindow_content += '<a data-fancybox="images" href="'+gallery[0][x]+'"><img src="'+gallery[0][x]+'" />';
					if (x == 3) break; // You can choose to only show the first eg. 4
				}

				infowindow_content += '</div>';

				for (x = 4; x < gallery[0].length; x++) {
					infowindow_content += '<a class="hidden" data-fancybox="images" href="'+gallery[0][x]+'"><img src="'+gallery[0][x]+'" />';
				}		
				
				infowindow_content += '</div>';

				// Find address
				geocoder.geocode( { 'address': location[1]}, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
						map.setCenter(results[0].geometry.location);
						createMarker(results[0].geometry.location, infowindow_content);
					} else {
						console.log("Google Maps ERROR: Geocode could not find " + location[1] + " for the following reason: " + status);
					}
				});
			}

			function createMarker(latlng,html){
				
				var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					icon: pin,
					shadow: shadow
				});

				// Refit and center map
				bounds.extend(latlng);
				map.fitBounds(bounds);

				// Location Window
				google.maps.event.addListener(marker, 'click', function() {
					
					// Change marker icon on click and back
					if (selectedMarker) {
						selectedMarker.setIcon(pin['url']);
					}
					marker.setIcon(pin_selected);
					selectedMarker = marker;
					
					// Setup infowindow for marker
					infowindow.setContent(html);
					infowindow.open(map, marker);

				});
					
				/*google.maps.event.addListener(marker, 'mouseout', function() { 
					//infowindow.close();
				});*/

			}
			
	});
</script>