Skip to content

Instantly share code, notes, and snippets.

@jwo

jwo/map.js

Last active Dec 21, 2020
Embed
What would you like to do?
React google maps with multiple markers, only one info window
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%` }} />}
/>
)
}
}
@bwywb00

This comment has been minimized.

Copy link

@bwywb00 bwywb00 commented Jan 7, 2019

I really appreciate your help sir 👍

@goldapple

This comment has been minimized.

Copy link

@goldapple goldapple commented Jan 18, 2019

thank you so much ! It was very useful .

@fuzunspm

This comment has been minimized.

Copy link

@fuzunspm fuzunspm commented Feb 7, 2019

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

@sawsenmachta

This comment has been minimized.

Copy link

@sawsenmachta sawsenmachta commented Apr 8, 2019

thank you very much !

@mathesond2

This comment has been minimized.

Copy link

@mathesond2 mathesond2 commented Apr 25, 2019

Elegant jwo!! ✌️

@yaduvanshi6584

This comment has been minimized.

Copy link

@yaduvanshi6584 yaduvanshi6584 commented May 24, 2019

Superb, thanks.

@nmshkjhn

This comment has been minimized.

Copy link

@nmshkjhn nmshkjhn commented Jun 6, 2019

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?

@nmshkjhn

This comment has been minimized.

Copy link

@nmshkjhn nmshkjhn commented Jun 6, 2019

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}

@SivanKarthick

This comment has been minimized.

Copy link

@SivanKarthick SivanKarthick commented Nov 9, 2019

Superb, thanks.

@apoorva-shah

This comment has been minimized.

Copy link

@apoorva-shah apoorva-shah commented Apr 13, 2020

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

@jramirezneira

This comment has been minimized.

Copy link

@jramirezneira jramirezneira commented May 3, 2020

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

@Simran1203

This comment has been minimized.

Copy link

@Simran1203 Simran1203 commented May 18, 2020

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

@pedrocardenas247

This comment has been minimized.

Copy link

@pedrocardenas247 pedrocardenas247 commented Dec 21, 2020

Thanks x 1000

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment