|
@@ -1,14 +1,18 @@
|
|
import React, { useRef, useEffect } from "react";
|
|
import React, { useRef, useEffect } from "react";
|
|
/* global google */
|
|
/* global google */
|
|
|
|
|
|
-// avoid re-rendering with memo(..., () => true)
|
|
|
|
-// this reduces reusability of this component, but that's fine for this
|
|
|
|
-export default React.memo(({
|
|
|
|
- onMarkerMoved
|
|
|
|
-}) => {
|
|
|
|
|
|
+export default ({ onMarkerMoved }) => {
|
|
const mapDivRef = useRef(null);
|
|
const mapDivRef = useRef(null);
|
|
|
|
+ const mapRef = useRef(null);
|
|
|
|
+ const markerRef = useRef(null);
|
|
|
|
+
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
- const googleMap = new google.maps.Map(mapDivRef.current, {
|
|
|
|
|
|
+ if (mapRef.current) {
|
|
|
|
+ console.log("Attempted to re-run effect with existing Map");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ mapRef.current = new google.maps.Map(mapDivRef.current, {
|
|
center: { lat: 25, lng: -25 },
|
|
center: { lat: 25, lng: -25 },
|
|
zoom: 0,
|
|
zoom: 0,
|
|
disableDefaultUI: true,
|
|
disableDefaultUI: true,
|
|
@@ -16,17 +20,16 @@ export default React.memo(({
|
|
});
|
|
});
|
|
|
|
|
|
if (onMarkerMoved) {
|
|
if (onMarkerMoved) {
|
|
- googleMap.addListener("click", ({ latLng }) => {
|
|
|
|
- if (mapDivRef.current.mapMarker) {
|
|
|
|
- mapDivRef.current.mapMarker.setMap(null);
|
|
|
|
- }
|
|
|
|
- mapDivRef.current.mapMarker = new google.maps.Marker({ map: googleMap, position: latLng });
|
|
|
|
- if (onMarkerMoved) {
|
|
|
|
- onMarkerMoved({ lat: latLng.lat(), lng: latLng.lng() });
|
|
|
|
|
|
+ mapRef.current.addListener("click", ({ latLng }) => {
|
|
|
|
+ if (markerRef.current) {
|
|
|
|
+ markerRef.current.setMap(null);
|
|
}
|
|
}
|
|
|
|
+ markerRef.current = new google.maps.Marker({ map: mapRef.current, position: latLng });
|
|
|
|
+ console.log({ lat: latLng.lat(), lng: latLng.lng() });
|
|
|
|
+ onMarkerMoved({ lat: latLng.lat(), lng: latLng.lng() });
|
|
});
|
|
});
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ }, [onMarkerMoved]);
|
|
|
|
|
|
return <div className="map-div" ref={mapDivRef} />
|
|
return <div className="map-div" ref={mapDivRef} />
|
|
-}, () => true);
|
|
|
|
|
|
+}
|