1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { Col } from 'antd'
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
} from 'react-google-maps'
let newLatLng = [{ lat: 15.118524429823255, lng: 104.9075726928711 }]
const onMarkerDragEnd = (event) => {
newLatLng[0].lat = event.latLng.lat()
newLatLng[0].lng = event.latLng.lng()
console.log('newLat', newLatLng[0].lat, 'newLng', newLatLng[0].lng)
}
const MapWithAMarker = withScriptjs(
withGoogleMap(() => (
<GoogleMap defaultZoom={8} defaultCenter={newLatLng[0]}>
<Marker
draggable={true}
position={newLatLng[0]}
onDragEnd={(e) => onMarkerDragEnd(e)}
/>
</GoogleMap>
))
)
export default function App() {
return (
<Col md={24} span={24}>
<MapWithAMarker
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYQsoMGSxKVOe6vilIiEedgPhRDjcPbC8&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: '100%' }} />}
containerElement={<div style={{ height: '400px' }} />}
mapElement={<div style={{ height: '100%' }} />}
/>
</Col>
)
}