Home › Forums › JavaScript › Clickable Page Links to Open Markers on Google Map? › Reply To: Clickable Page Links to Open Markers on Google Map?
September 24, 2016 at 1:21 am
#245865
grebre0
Participant
Consider this code.
First, you need to store markers to use them later. At the first line of your map <script>
create an empty array:
var markers = [];
Then, after creating marker push it to markers
array
// your code
marker = new google.maps.Marker({
icon: markericon,
...
});
// new code
markers.push(marker);
Then, create html links of this type. The key is data-title
attribute which corresponds with marker title
<a href="#" class="map-link" data-title="East Howe Steps">Map-link</a>
Then, add click listener to links
<script>
$(function) {
// when link with class 'map-link' is clicked
$('.map-link').on('click', function(e) {
// prevent default link behaviour
e.preventDefault();
// get link data-title
var titleToFind = $(this).data('title');
// find map marker in markers array with the same title
var markerToClick;
for(var i = 0; i < markers.length; i++) {
if(markers[i].title === titleToFind) {
markerToClick = markers[i];
}
}
// and click it using google events API
new google.maps.event.trigger( markerToClick, 'click' );
});
}
</script>