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: http://79.170.40.181/cranes.co.uk/stockists/ 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>
...
</ul>
Here’s the code I thought would work but doesn’t:
var name = $('#listdata').find('.clickaway');
google.maps.event.addDomListener(name, 'click', function() {
infowindow.open(map,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: http://energycoalition.org/energy-architects-in-action/
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());
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent($marker.html());
infowindow.open(map, 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: http://www.richarderdman.com/collections-map/
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?
Thanks
