Home Forums General Issues Link to Google Map marker from outside of map


Link to Google Map marker from outside of map

  • I have a map full of markers and I have a separate unordered list, listing those markers. I’m trying to make the two elements talk with eachother.

    When I click a link in my list, I want it to centre the map and open the info window of that marker on the map.

    How can I do this?

    I have a demo site setup: Just view source to see the script I’ve taken (unedited) from the Google Maps Docs pages here on the ACF site.

    I just don’t know how to do this any help would be great.

    This is my list of links:

    <ul id="listdata"
       <li><a href="#" class="clickaway">Location 1</a></li>
       <li><a href="#" class="clickaway">Location 2</a></li>

    Here’s the code I thought would work but doesn’t:

    var name = $('#listdata').find('.clickaway');
    google.maps.event.addDomListener(name, 'click', function() {,marker);
        alert('found me');
  • Looking for some help on this as well – I’m not having any luck so far. OP, if you were able to find a a method, could you post it up?

  • bumping this again – anyone having any luck?

  • I actually did that here:

    in the add_marker portion I updated it to this:

    	*  add_marker
    	function add_marker( $marker, map ) {
    		// var
    		var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    		// create marker
    		var marker = new google.maps.Marker({
    			position	: latlng,
    			map			: map,
    			icon: '...'
    		// add to array
    		map.markers.push( marker );
    		// if marker contains HTML, add it to an infoWindow
    		if( $marker.html() )
    			// create info window
    			 liTag=$("body ul.utilities").find("[data-lat='" + $marker.attr('data-lat') + "']");
    			 // console.log(liTag);
    			// show info window when marker is clicked
    			$(liTag).click(function() {
    				infowindow.setContent($marker.html());, marker);
    			google.maps.event.addListener(marker, 'click', function() {
    				infowindow.setContent($marker.html());, marker);
    			// close info window when map is clicked
    		     google.maps.event.addListener(map, 'click', function(event) {
    		        if (infowindow) {
    		            infowindow.close(); }

    I use to separate loops, one to output the list items, and one for the map. In the list items I add the latitude to the LI itself

  • wonderful – thanks so much for the input, i’m gonna give this a shot and report back. Appreciate the help.

  • THIS! EXACTLY THIS! Thank you @rorymheaney! I was looking for this answer for like 18 hours yesterday. You are a lifesaver! Nice website by the way. I love the way you implemented all of your maps. You did that all with ACF?

  • @uptownbrent thanks! Yes that section is all acf. Its a repeater on their site, 4 repeaters, 4 maps.

    It could be done with 1 repeater technically/post type and you use options to toggle markers and update map styling. That’s how I would do it now with what I know now.

    I have other examples of ‘search’ etc, can be done with acf and getting into google maps.

  • likewise much thanks – i never reported back, it worked great, my results are here:

  • Hello,
    This is now an old thread but it is just what I need – that is if I can get it to work.

    My problem is that I just cant get the links in the list to trigger the infowindow popup.

    Any chance you can provide a few more details on how to get this to work?

    For example, you mentioned that you “… In the list items I add the latitude to the LI itself”

    What do you mean by that?


Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Link to Google Map marker from outside of map’ is closed to new replies.