I am currently building a google map api using react-google-maps and I would like to create multiple markers to display info of cities around the world on the info window. But since they are all from the html object. Whenever I clicked on one marker, all info windows will be opened. If there a way to fix this? Sample code:
<GoogleMap
defaultZoom={3}
defaultCenter={{ lat: 40.452906, lng: 190.818206 }}
>
<Marker id = "mark1"
options={{icon: Mark1}}
position={{ lat: 34.4076645, lng: 108.742099 }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow id = "info1"
onCloseClick={props.onToggleOpen}
>
<div> content1 </div>
</InfoWindow>}
</Marker>
<Marker
options={{icon: Mark2}}
position={{ lat: 35.6958783, lng: 139.6869534 }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow
onCloseClick={props.onToggleOpen}
>
<div> content2 </div>
</InfoWindow>}
</Marker>
</GoogleMap>
In your code, onClick
of Marker
you just call {props.onToggleOpen}
, which i hope toggles a flag. Here you should send which marker you are clicking so you need to modify your onClick
to something like below
onClick={() => { props.onToggleOpen("mark1"); }}
In the above line, Mark1
should be a unique value that you can use to identify the respective Marker
. You can replace this with the marker id or of something that will be unique to the respective Marker
.
Second, you need to modify onToggleOpen
to toggle the flag for the respective marker
which is identified by the argument it receives(the unique value you send from `onClick). You can use an array like data structure to store this value.
Then you need to show your InfoWindow
based on the flag respective to the Marker
. Considering isOpen
will be an array of flags(after incorporating the above changes), one would show InfoWindow
using condition something like below
<Marker id = "mark1"
options={{icon: Mark1}}
position={{ lat: 34.4076645, lng: 108.742099 }}
onClick={() => { props.onToggleOpen("mark1"); }}
>
{props.isOpen["mark1"] && <InfoWindow id = "info1"
onCloseClick={() => { props.onToggleOpen("mark1"); }}
>
<div> content1 </div>
</InfoWindow>}
</Marker>
Hope that leads you to a right direction.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With