react-google-maps
react-google-maps copied to clipboard
i was trying to change the postion marker by onclick but i am unable to get the updated latitude and lng of the marker
import React from 'react'; import { compose, withStateHandlers } from "recompose"; import { InfoWindow, withGoogleMap, withScriptjs, GoogleMap, Marker } from 'react-google-maps';
const Map = compose( withStateHandlers(() => ({ isMarkerShown: false, markerPosition: null }), { onMapClick: ({ isMarkerShown }) => (e) => ({ markerPosition: e.latLng, isMarkerShown:true }) }), withScriptjs, withGoogleMap ) (props => <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }} onClick={props.onMapClick} > {props.isMarkerShown && <Marker position={props.markerPosition} />}
</GoogleMap>
)
export default class MapContainer extends React.Component { constructor(props) { super(props) }
render() {
return (
<div style={{ height: '100%' }}>
<Map
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvcDy5ZYc2ujCS6TTtI3RYX5QmuoV8Ffw"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
)
}
}
@sanskar2999 The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api
We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.
You can see our docs: https://react-google-maps-api-docs.netlify.app
Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples
The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api
Our Spectrum community: https://spectrum.chat/react-google-maps Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ
Enjoy!