CODEWITHSUNDEEP
javascriptreactjsgoogle-maps-react
Trisma
Trisma

Reputation: 763

Adding more info in InfoWindow

So I've been working with google-maps-react for a few months now and everything is working fine, now there is just a little thing that I don't understand. And that's probably why I can't achieve this.

So here is the structure of my <InfoWindow> : 

<InfoWindow
    marker={this.state.activeMarker}
    visible={this.state.showingInfoWindow}
>
  <div>
      <h1>{this.state.selectedPlace.title}</h1>
   </div>
</InfoWindow>

So this is just fine and shows me the title, but I want some more information.

This is my setState() for that information, and the function that is triggered when I click on a <Marker /> : 

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

I just call it like this :

onClick={this.onMarkerClick}

But here is a thing I don't get, where does those values (props and marker) come from? And how can I pass in another value in it? Let's say I want to pass in m, how do I do that? Because if I pass in m in the onClick() he says that props and marker are missing...

Please guide me.

Upvotes: 1

Views: 40

Answers (1)

Trisma
Trisma

Reputation: 763

Ok so I figured it out a little bit by analyzing how he got all the information. I've seen that the value of props that is printed out in onMarkerClick() are all the props from the <Marker /> itself, so I added a data prop with my value m in it.

This is what my <Marker /> looks like now : 

<Marker
  key={uuidv1()}
  position={{ lat: m.x, lng: m.y }}
  title={m.title}
  data={m}
  onClick={this.onMarkerClick}
/>

now in onMarkerClick I can simply do props.data and I can access all the information.

Upvotes: 1

Related Questions