Google-maps-react: programmatically click marker

[hectorhottomali]

I have a scrollable/horizontal list of locations on the bottom of the map, the idea is that the user can click on a location in this list, and I want to programmatically click or show the corresponding markers InfoWindow.

I have this method for when a user clicks on a marker which works fine:

onMarkerClick(props, marker, e) {
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
}

While i can reproduce the "props" parameter, I haven't been able to reproduce the "marker" parameter.

Is there anyway to do what I describe?

In the attached file I want to be able to click on the banner on the bottom, Strathcona Park, when I do that, I want to open up the markers InfoWindow inside the map.

[natesct]

Hi

It seems you, I and others have come across the same problem. Have you managed to figure it out yet? I have struggled for days and have no solution. Others told me to use another library as this is one is too basic.

[hectorhottomali]

I have not been able to make it work as described, it has been weeks for me on and off, but to no avail. I have seen other plugins, but the setup is a lot of work and some don't seem to have the basics of what I need, this plugin has everything except for the clicking.

Are you using another plugin? if so which one?

[natesct]

I am close to a solution but it seems it is not working. I can get it to click but still not working 100%. I think I will be forced to change to another lib. :(

[ivanteso]

Hi guys @natesct and @hectorhottomali , I'm facing exactly the same issue. Looks like there's no way to set "manually" the marker as active, at least for me. Have you found a solution for this issue?

[hectorhottomali]

@ivanteso I haven't figured out the solution, I stopped looking for one a while back, I am using the plugin as is for the time being.

[ivanteso]

I'm trying to use the solution proposed here, but still no results :/

[elharony]

Well, I have the SAME problem as well. And I didn't find a solution for it, till now!
Any updates from you guys? :)

I hope @auser give us a hand here!

[abedsh]

You can reference the marker you want to click by ref id.

retrieve the marker you want to with var ref= this.refs.marker1;

[FelixSchwarzmeier]

Thanks @abedsh 👍 You can then call onMarkerClick using:

this.onMarkerClick(this.refs.marker1.props, this.refs.marker1.marker);

[Shuhui11]

Hi @FelixSchwarzmeier, which files and where in the code did you put all these in? , var ref= this.refs.marker1; and this.onMarkerClick(this.refs.marker1.props, this.refs.marker1.marker);

I have a list.js with my locations and a map.js for the map and markers. I am also looking at clicking on the location in the list and its corresponding marker popping up.

[FelixSchwarzmeier]

@Shuhui11 I have a JS-map which stores the marker-refs for each list item.
I initialize this map using:
<Marker ref={(marker) => mapListItemIdToMarker[listItemId] = marker} ....
When clicking on a list item, I set the respective itemId to be active. My InfoWindow is always displaying the active marker, which can then be accessed using the JS-map mentioned above: <InfoWindow marker={mapListItemIdToMarker[activeListItemId]} ....
Hope this helps!:)

[Shuhui11]

@FelixSchwarzmeier thank you for sharing with more details! :)