I'm rather new to React & I'm trying to make a map that allows you to drag an infinite number of markers from a sidebar onto the google map.
import GoogleMapReact from 'google-map-react';
import { useState, useRef } from 'react';
import Marker from './Marker';
const apiIsLoaded = (map, maps) => {
console.log(map, maps);
};
const Map = ({center}) => {
const [zoom, setZoom] = useState(11);
const [draggable, setDraggable] = useState(true)
const [lat, setLat] = useState(42)
const [lng, setLng] = useState(-122)
function handleChange({zoom}) {
setZoom( zoom
)
}
function onMarkerInteraction(childKey, childProps, mouse) {
console.log("down")
setDraggable( false
)
setLat( mouse.lat
)
setLng( mouse.lng
)
}
function onMarkerInteractionUp({draggable}) {
console.log("up")
setDraggable(true
)
}
return (
<div className="map">
<GoogleMapReact
draggable={ draggable }
onChange={ handleChange }
center={ center }
zoom={ zoom }
onChildMouseDown={ onMarkerInteraction }
onChildMouseUp={ onMarkerInteractionUp }
onChildMouseMove={ onMarkerInteraction }
bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => {
apiIsLoaded(map, maps)
}}
>
<Marker
id={1}
latitude={lat}
longitude={lng}
/>
</GoogleMapReact>
</div>
)
}
Map.defaultProps = {
center: {
lat: 42.3265,
lng: -122.8756
}
}
export default Map
I can't get the marker to drag and when I try to replace the function in the onChild* methods with console.log("click"), it only logs when I zoom in on the map.
With this current code, none of the onChild* functions run at all. What am I doing wrong and what am I not understanding?