React google maps with multiple markers, only one info window

map.js

import React, { Component } from "react"
import { compose } from "recompose"
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from "react-google-maps"

const MapWithAMarker = compose(withScriptjs, withGoogleMap)(props => {

  return (
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: 29.5, lng: -95 }}>
      {props.markers.map(marker => {
        const onClick = props.onClick.bind(this, marker)
        return (
          <Marker
            key={marker.id}
            onClick={onClick}
            position={{ lat: marker.latitude, lng: marker.longitude }}
          >
            {props.selectedMarker === marker &&
              <InfoWindow>
                <div>
                  {marker.shelter}
                </div>
              </InfoWindow>}
            }
          </Marker>
        )
      })}
    </GoogleMap>
  )
})

export default class ShelterMap extends Component {
  constructor(props) {
    super(props)
    this.state = {
      shelters: [],
      selectedMarker: false
    }
  }
  componentDidMount() {
    fetch("https://api.harveyneeds.org/api/v1/shelters?limit=20")
      .then(r => r.json())
      .then(data => {
        this.setState({ shelters: data.shelters })
      })
  }
  handleClick = (marker, event) => {
    // console.log({ marker })
    this.setState({ selectedMarker: marker })
  }
  render() {
    return (
      <MapWithAMarker
        selectedMarker={this.state.selectedMarker}
        markers={this.state.shelters}
        onClick={this.handleClick}
        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    )
  }
}

I really appreciate your help sir 👍

thank you so much ! It was very useful .

i have 20 markers but only a few of them are displaying on the map. No error, i can log all locations successfully but couldn't manage to show missing ones on the map. In addition i'm getting "}" just below the map div, same number of locations

thank you very much !

Elegant jwo!! ✌️

Superb, thanks.

Hi,
This is perfectly working for me,
I need one more addition to this,
How can I list the 'Marker' in the Map into a list(UL) too, Also the list(li) click should pop the info window?

Hi,
This is perfectly working for me,
I need one more addition to this,
How can I list the 'Marker' in the Map into a list(UL) too, Also the list(li) click should pop the info window?

Got the solution, simply paste this after infowindow close
{marker.name}

Superb, thanks.

nice,
But after closing infowindow when i click marker again i do not see infowindow.
Can you please suggest?
Thanks

you saved my life!, this works very well, even with more than 5000 markers, Many days ago I was taying to find a solution, I appreciate your help

After closing infowindow when i click marker again i do not see infowindow.
Can you help?
Thanks

Thanks x 1000

Hii , while working with Mapbox why its showing markers at only in one map

Hi @nik

Hii , while working with Mapbox why its showing markers at only in one map

Hi i am trying to render markers on Mapbox, but unable to do so , can you provide me any idea about that?

Do you know how to add a mouseover event on the marker to have the infowindow ?