Consider updating google maps package to react-google-maps-api

[UltimateForm]

react-google-maps-api

Why? react-google-maps has been unmaintained for 2 years and every new issue seems to be followed by this tomchentw/react-google-maps#1020 (comment)

I've tested react-google-maps-api on my side and it works quite well with new react-admin version, most importantly 3.0.0

here's an example implementation of a viewer (i've written the input as well but it's a bit longer and dirtier):

/* eslint-disable */
import React from "react";
import {
	GoogleMap,
	Data,
	GoogleMapProps,
	DataProps,
	useLoadScript,
} from "@react-google-maps/api";
import { googleMapsApiKey } from "../config";
var debug = require("debug")("app:components:googlemaps");

const defaultCenter = {
	lat: 38.805470223177466,
	lng: -118.76220703125
};

interface IGoogleMapsProps {
	apiKey?: string;
	center?: typeof defaultCenter;
	ignoreUserLocation?: boolean;
	mapContainerStyle?: any;
	mapProps?: Partial<GoogleMapProps>;
	dataProps?: Partial<DataProps>;
	children?: any;
	onClick?: (e: any) => void;
	onLoad?: (map: any) => void;
}

const Map: React.FC<IGoogleMapsProps> = (props: IGoogleMapsProps) => {
	const {
		apiKey,
		center,
		children,
		mapProps,
		dataProps,
		onClick,
		onLoad,
		ignoreUserLocation
	} = props;
	const { isLoaded, loadError } = useLoadScript({
		googleMapsApiKey: apiKey || googleMapsApiKey
	});
	const G = React.useRef<any>(undefined);
	const MAP = React.useRef<any>(undefined);
	if (!G.current) {
		G.current = (window as any).google;
	}
	const centerValid = typeof center === "object" && center.lat && center.lng;
	React.useMemo(() => {
		if (centerValid || ignoreUserLocation) return;
		navigator.geolocation.getCurrentPosition(
			pos => {
				if (MAP.current)
					MAP.current.panTo({
						lat: pos.coords.latitude,
						lng: pos.coords.longitude
					});
				else {
					defaultCenter.lat = pos.coords.latitude;
					defaultCenter.lng = pos.coords.longitude;
				}
			},
			error => {
				console.error("ERROR RETRIEVING USER LOCATION", error);
			}
		);
	}, []);
	return isLoaded ? (
		<GoogleMap
			zoom={16}
			id="google-map"
			center={centerValid ? center : defaultCenter}
			mapContainerStyle={{ width: "100%", height: "100%" }}
			{...mapProps}
			onClick={e => {
				if (MAP.current) {
					MAP.current.panTo(e.latLng);
					onClick && onClick(e);
				}
			}}
			onLoad={map => {
				MAP.current = map;
				onLoad && onLoad(MAP.current);
			}}
		>
			<Data {...dataProps} />
			{children}
		</GoogleMap>
	) : (
		<div>loadError</div>
	);
};

export default Map;

[MathiasBerwig]

i've written the input as well but it's a bit longer and dirtier

@UltimateForm would you mind sharing it as well?

[AdamDocherty]

@UltimateForm - +2 for what @MathiasBerwig said!

[UltimateForm]

@MathiasBerwig
https://codesandbox.io/s/wizardly-dijkstra-6br6x (you will need to set your google maps API key at config.js)

this is a somewhat rushed impl, but still better than what i have locally (mine has other extra stuff like geoHash conversion i.e). Everything you need is at the "googleMaps" folder and the forms on post/index.tsx, the rest is just what I copied from react-admin's demo

[UltimateForm]

@MathiasBerwig @AdamDocherty also note that on my impl i separated the input from the map viewer because at some points I need only the viewer, a purely input usage can combine the two for better readability

[m7xedhoward]

@UltimateForm Great work, could you please share a { PostShow } example