Clickable Page Links to Open Markers on Google Map?

[ruby76]

Hello – I’m working on a custom Google Map with code originally generated over at MapBuildr.com, and customizing from there. Although I’ve read for days now about how to add things to the map (with Google’s support documentation), I’m having trouble with one extra thing: I want users to be able to click links in the website space (so technically external as HTML, separate from the map JS code) to make it open that marker within the map, with its little popup info window.

There are a lot of support forum posts around the web that describe how to create an array containing each of the locations, then link to each, but I’ve tried working a number of them into my code and they just won’t work in my case.

I’m trying to find out the best way to add JS code so it stores the necessary information, then the code to put in an HTML link so it will open/activate the map markers.

Simple map with only 4 locations so far is here: http://www.easthowesteps.com/new/v4/

CodePen link with the map code is here: http://codepen.io/ruby76/pen/WGpjJa

Thanks in advance for any help!

[grebre0]

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>

[ruby76]

Thanks for that info. I think I understand how this is setting things up, but not quite well enough to troubleshoot what’s not working at this point. I think I added the code in the appropriate places, but now clicking the HTML link just takes me to the top of the current page.

Forgive my newbie level of JS knowledge here – I always make an alert to just spit out the values of variables or arrays to see if they’re working, and having it pop up the value of markers[i] during that loop just produces [Object object]. I’m not quite sure if that means it isn’t storing the marker data in the array properly, but maybe that has something to do with it? Or maybe I’m just still doing the link part wrong by using “East Howe Steps” as the data title?

Here’s an updated pen showing the current code: http://codepen.io/ruby76/pen/RGpzPx

Thanks again!

[ruby76]

I’m trying this one more time from the top with your recommended code additions, and I’m wondering if there’s something preventing that default link behavior line from working properly. Clicking the link just takes me up to the top of the page (and when I scroll back down, it still hasn’t activated the “click” on the map).

I put the JS code for the link click listener just above the section with the links, rather than with the rest of the map code, because inserting it there makes the map disappear. Is it OK to have them separate like this, or could that be causing problems?

Updated pen: http://codepen.io/ruby76/pen/rrzzaN

Thanks for any help,
Christiana

[ruby76]

I was able to find another trick to make this work. If anyone stumbles across this same issue in the future, I took this approach and it worked well for me: http://stackoverflow.com/questions/20548472/how-to-trigger-google-maps-marker-from-outside-of-map

Thanks!

[Author]

Posts