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>