Support

Account

Home Forums General Issues How To Trigger Google Maps Marker From Select DropDown

Solving

How To Trigger Google Maps Marker From Select DropDown

  • Hi,

    I’m having trouble figuring this one out.

    I have used the documentation found here https://www.advancedcustomfields.com/resources/google-map/ and got multiple map markers working with repeater fields without an issue, but a client wants me to create a select field that lists out location names for people to select and then center in on that location on the map.

    But I can’t seem to figure it out. I’ve Googled the hell out of it, and all seem to keep coming back to some thing like this …

    google.maps.event.trigger(markers[i], ‘click’);

    I’m looking at creating something like this.
    http://jsfiddle.net/kfgm7tcz/2/

  • Hey,

    You need to have your select option values correspond to the markers index key (0,1,2,3) etc.

    As you can see in the script you linked there’s a global variable gmarkers that you need to push each marker into and then use to target the appropriate marker with your trigger.

    So in essence:

    1. Create a global variable (array).
    2. Push each new created marker into this array.
    3. Loop through each location to create your select options and give them the value of their key (0,1,2 etc) in a foreach loop foreach( $markers as $key => $marker ).
    4. When user selects a value from the dropdown, take the value and trigger the click event on the marker in the global array with the same index key.

    The example you sent is pretty much exactly what you need.. you just need to add these things to the ACF example code instead.

  • Hi @jonathan,

    I’m at a loss on how to combine it. I’ve been trying for hours. My example is here http://codepen.io/ashbryant/pen/kkLYZq any guidance you be most gratefully received 🙂

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

The topic ‘How To Trigger Google Maps Marker From Select DropDown’ is closed to new replies.