Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Clickable Page Links to Open Markers on Google Map? Reply To: Clickable Page Links to Open Markers on Google Map?

#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>