Google-maps-react: How to have groups of markers as a component?

[ElGoorf]

I have a few collections of markers that each have their own life-cycles, states and stores, independent of other groups or the map itself. I feel this could be easily managed if I could make a parent component for each type of marker, but not sure how or even if it's the best way.

Does anyone have any thoughts on this?

Cheers

[416serg]

Have you tried:

<Map>
  <OneComponent />
  <SecondComponent />
</Map>

And then mapping the Markers within those components?

[ElGoorf]

I'm still not entirely sure how that'd work. Just rough-coding here, I'm envisaging something like this:

<Map>
<WhaleMarkers props={WhaleCoordinatesArray} />
<DolphinMarkers props={DolphinCoordinatesArray} />
</Map>

With WhaleMarkers and DolphinMarkers being a component that maps() the arrays to render a list of Markers.. but you can't just render a list of Marker components, you have to put them in a wrapper element of some sort. This then breaks the map, as the markers need to appear directly in the map, with no wrapper element in between, as far as I understand.

[kimchristiansen]

I am having the same issue. as soon as you wrap the in a div, an error occurs that this.marker is undefined. Any idea how to solve the problem?

[nazreen]

Has anyone found a solution for this yet?

[roz0n]

Doubtful. After looking over at a lot of the source, this component is severely limited in regards to interaction between map elements and user events. Bit disappointed to have wasted an extensive amount of time dealing with this module.

[elharony]

I wanted to loop over my data that came from a .json file. So, I used map() to loop over them and display as many markers as my database's places have.

Unfortunately, I tried 2 solutions and both of them fail:

• Wrap the <Marker> inside a div: Well, this doesn't work and nothing was showing at all!!
• I loop over:

<Marker>
    <InfoWindow>
    </InfoWindow>
</Marker>

It works and displays my markers all over the map. BUT, the InfoWindow doesn't open!

---

If anyone finds a solution, please let me know!
_I am new to React!_

[djgrant]

This issue happens because the

To get around this create a component that renders a list of markers and explicitly pass the props through:

const Markers = props => (
  myMarkers.map(marker =>
    <Marker 
      {...props}
      key={marker.id} 
      title={marker.name}
     />
  )
);

And use it inside of Map:

<Map>
  <Markers />
</Map>

[ayushikhetan]

Has anyone solved this issue?

[elharony]

Hi @ayushikhetan ,

I don't think so.
But I've created a Tutorial, you can find it here:
https://www.youtube.com/watch?v=nDJ00zO9X2U

[rostgoat]

@djgrant do you pass anything to <Markers />?