Skip to content

Instantly share code, notes, and snippets.

@Dropa
Created November 14, 2017 21:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Dropa/cdcccae099874f392dfc7b9b90551c9a to your computer and use it in GitHub Desktop.
Save Dropa/cdcccae099874f392dfc7b9b90551c9a to your computer and use it in GitHub Desktop.
Why does this either open up every marker, or none
import React from "react"
const fetch = require("isomorphic-fetch");
const { compose, withProps, withHandlers, withStateHandlers } = require("recompose");
const demoFancyMapStyles = require("./demoFancyMapStyles.json");
const FaAnchor = require("react-icons/lib/fa/anchor");
const {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
InfoWindow
} = require("react-google-maps");
const { MarkerClusterer } = require("react-google-maps/lib/components/addons/MarkerClusterer");
const StyledMapWithAMarkerClusterer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyBkBrkFqSna6gn9WzSNqDJT8K-DFot1Fzk&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `100vh` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withStateHandlers(() => ({
isOpen: false,
}), {
onToggleOpen: ({isOpen}) => () => ({
isOpen: !isOpen,
})
}),
withHandlers({
onMarkerClustererClick: () => (markerClusterer) => {
},
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={13}
defaultCenter={{ lat: 61.49911, lng: 23.78712 }}
defaultOptions={{ styles: demoFancyMapStyles}}
>
<MarkerClusterer
onClick={props.onMarkerClustererClick}
averageCenter
enableRetinaIcons
gridSize={60}
>
{props.markers.map(marker => (
<Marker
//onClick={props.onToggleOpen} // This opens up every marker
onClick={() => props.onToggleOpen} // This does nothing(?)
key={marker.id}
position={{ lat: parseFloat(marker.field_longitude), lng: parseFloat(marker.field_latitude) }}
>
{props.isOpen && <InfoWindow
//onCloseClick={props.onToggleOpen} // same as above
onCloseClick={() => props.onToggleOpen}
>
<FaAnchor />
</InfoWindow>}
</Marker>
))}
</MarkerClusterer>
</GoogleMap>
);
export default class App extends React.PureComponent {
componentWillMount() {
this.setState({ markers: [] })
}
componentDidMount() {
const url = "http://dropa.asuscomm.com/api/devices-and-detectors";
fetch(url, {method: 'GET', headers:{ 'Accept':'application/x-www-form-urlencoded', 'Content-Type':'application/x-www-form-urlencoded',}})
.then(res => res.json())
.then(data => {
this.setState({ markers: data });
});
}
render() {
return (
<StyledMapWithAMarkerClusterer markers={this.state.markers} />
)
}
}
@mksglu
Copy link

mksglu commented Nov 29, 2017

What should be in this file?
demoFancyMapStyles.json

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