I am working on google maps. I want to link markers to items in menu. If I click the the name, it should show respective marker only. But my code is pointing to only last marker in the map.
All my links are pointing to last marker. Please help me solving this problem.
HTML:
<div class="menu">
<h2>Locations</h2>
<hr>
<div data-bind="foreach: visible">
<a><p class="clicked" data-bind="text: location, click"></p></a>
<hr>
</div>
</div>
javaScript:
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++) {
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var loc = markersData[i].locationId;
var name = markersData[i].location;
$('.clicked').on('click', function() {
if ($('.clicked').location = name) {
console.log(location);
createMarker(latlng, loc);
}
});
I changed the code but this one is displaying all the markers at a time on clicking single link.
function displayMarkers() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++) {
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var loc = markersData[i].locationId;
var name = markersData[i].location;
checkLinkClicked(latlng, loc, name);
createMarker(latlng, loc);
bounds.extend(latlng);
}
map.fitBounds(bounds);
}
function checkLinkClicked(latlng, loc, name) {
$('.clicked').on('click', function () {
if(('.clicked').location = name) {
createMarker(latlng, loc);
}
});
}
Please help.