rayzh2012
2/23/2017 - 8:28 PM

Google Maps with multiple places clickable from table of content

Google Maps with multiple places clickable from table of content

<table id="js_content" class="content">
    <thead>
    	<tr>
			<th class="name">Name</th>
			<th class="email">E-mail</th>
			<th class="street">Street</th>
			<th class="city">City</th>
			<th class="zip">Zip</th>
		</tr>
	</thead>
	<tbody>
		<tr data-id="0" data-latitude="48.981010" data-longitude="16.519803" data-name="Name">
			<td class="name">Name <span data-href="0" class="show-on-map">show on map</span></td>
			<td class="email"><a href="mailto:email@email.com" title="email@email.com">email@email.com</a></td>
			<td class="street">Street</td>
			<td class="city">City</td>
			<td class="zip">Zip</td>
		</tr>
        <tr data-id="1" data-latitude="49.354179" data-longitude="16.014419" data-name="Name">
    		<td class="name">Name <span data-href="1" class="show-on-map">show on map</span></td>
			<td class="email"><a href="mailto:email@email.com" title="email@email.com">email@email.com</a></td>
			<td class="street">Street</td>
			<td class="city">City</td>
			<td class="zip">Zip</td>
		</tr>
	</tbody>
</table>

<script>    		

	(function($){

		var position = new google.maps.LatLng(49.674738,15.820313);     //default position
		var tableRow = $('.content tbody tr');                          //content table row
		var showOnMap  = $('.show-on-map');                             //link trigger opening map position
		var partners = [];                                                //data
		var markers  = [];                                              //map markers
		var infowindows = [];                                           //map info windows

		function Partner(id,link,latitude,longitude,name,email,street,city,zip) {
    		this.id = id;
			this.link = link;
			this.latitude = latitude;
			this.longitude = longitude;
			this.name = name;
			this.email = email;
			this.street = street;
			this.city = city;
			this.zip = zip;
		}

		function initialize() {
		    tableRow.each(function() {
    			partners[$(this).data('id')] = new Partner(
					$(this).data('id'),
					$(this).data('link'),
					$(this).data('latitude'),
					$(this).data('longitude'),
					$(this).data('name'),
					$(this).children('.email').html(),
					$(this).children('.street').text(),
					$(this).children('.city').text(),
					$(this).children('.zip').text()
				);
			});

            // google maps default options
			var myOptions = {
				zoom: 7,
				center: position,
				scrollwheel: true,
				mapTypeControl: true,
				mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL},
				streetViewControl: false
			};
            
            // google map marker image
			var image = new google.maps.MarkerImage('/images/marker.png',   
				new google.maps.Size(15,15),
				new google.maps.Point(0,0)
			);					

			var infoWindow = new google.maps.InfoWindow();
			var map = new google.maps.Map(document.getElementById("map"), myOptions);

			function getMarker(id) {return markers[id];}

			function setMarkers(partners) {
				for (var i in partners) {
					var latLng = new google.maps.LatLng(partners[i].latitude,partners[i].longitude);
					var content = '<div class="map-content"><h3>' + partners[i].name + '</h3><p><strong>Address:</strong><br>' + partners[i].street + '<br>' + partners[i].zip + ', ' + partners[i].city + '<br><br><strong>Email:</strong><br>' + partners[i].email + '</p></div>';
					createMarker(i,partners[i].name,latLng,content);
				}
			}

			function createMarker(id,name,latlng,content) {
				var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					title: name,
					icon: image,
					animation: google.maps.Animation.DROP,
				   	zIndex: 1
				});

				markers[id] = marker;
				infowindows[id] = new google.maps.InfoWindow({content: content});
						
				google.maps.event.addListener(marker,'click',function(){
					if(infoWindow) infoWindow.close();
					infoWindow = new google.maps.InfoWindow({content: content});
					infoWindow.open(map,marker);
				});

				return marker;
			}

			function closeInfoWindows() {
				for (var i=0;i<infowindows.length;i++) {
					infowindows[i].close();
				}
			}

			setMarkers(partners);

            // scroll to map on 'show on map' link click action
			showOnMap.click(function(){
				var id = $(this).data('href');
				closeInfoWindows();
				map.setZoom(15);
				position = markers[id].position;
				map.setCenter(markers[id].position);
				infowindows[id].open(map,markers[id]);
				$("body,html").animate({scrollTop: 365}, 600);
			});
		};				

		google.maps.event.addDomListener(window, 'load', initialize);

	})(jQuery);

</script>