@sanity/google-maps-input 2.29.2 → 2.29.4-purple-unicorn.648

package/lib/input/GeopointInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeopointInput.js","sources":["../../src/map/SearchInput.styles.tsx","../../src/map/SearchInput.tsx","../../src/input/GeopointSelect.tsx","../../src/input/GeopointInput.styles.tsx","../../src/input/GeopointInput.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const WrapperContainer = styled.div`\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  width: 220px;\n`\n","import * as React from 'react'\nimport {TextInput} from '@sanity/ui'\nimport {WrapperContainer} from './SearchInput.styles'\n\ninterface Props {\n  api: typeof window.google.maps\n  map: google.maps.Map\n  onChange: (result: google.maps.places.PlaceResult) => void\n}\n\nexport class SearchInput extends React.PureComponent<Props> {\n  searchInputRef = React.createRef<HTMLInputElement>()\n  autoComplete: google.maps.places.Autocomplete | undefined\n\n  handleChange = () => {\n    if (!this.autoComplete) {\n      return\n    }\n\n    this.props.onChange(this.autoComplete.getPlace())\n\n    if (this.searchInputRef.current) {\n      this.searchInputRef.current.value = ''\n    }\n  }\n\n  componentDidMount() {\n    const input = this.searchInputRef.current\n    if (!input) {\n      return\n    }\n\n    const {api, map} = this.props\n    const {Circle, places, event} = api\n    const searchBounds = new Circle({center: map.getCenter(), radius: 100}).getBounds()\n    this.autoComplete = new places.Autocomplete(input, {\n      bounds: searchBounds,\n      types: [], // return all kinds of places\n    })\n\n    event.addListener(this.autoComplete, 'place_changed', this.handleChange)\n  }\n\n  render() {\n    return (\n      <WrapperContainer>\n        <TextInput\n          name=\"place\"\n          ref={this.searchInputRef}\n          placeholder=\"Search for place or address\"\n          padding={4}\n        />\n      </WrapperContainer>\n    )\n  }\n}\n","import React from 'react'\nimport {SearchInput} from '../map/SearchInput'\nimport {GoogleMap} from '../map/Map'\nimport {Marker} from '../map/Marker'\nimport {LatLng, Geopoint} from '../types'\n\nconst fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}\n\ninterface SelectProps {\n  api: typeof window.google.maps\n  value?: Geopoint\n  onChange?: (latLng: google.maps.LatLng) => void\n  defaultLocation?: LatLng\n  defaultZoom?: number\n}\n\nexport class GeopointSelect extends React.PureComponent<SelectProps> {\n  static defaultProps = {\n    defaultZoom: 8,\n    defaultLocation: {lng: 10.74609, lat: 59.91273},\n  }\n\n  mapRef = React.createRef<HTMLDivElement>()\n\n  getCenter() {\n    const {value = {}, defaultLocation = {}} = this.props\n    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}\n    return point\n  }\n\n  handlePlaceChanged = (place: google.maps.places.PlaceResult) => {\n    if (!place.geometry) {\n      return\n    }\n\n    this.setValue(place.geometry.location)\n  }\n\n  handleMarkerDragEnd = (event: google.maps.MapMouseEvent) => {\n    this.setValue(event.latLng)\n  }\n\n  handleMapClick = (event: google.maps.MapMouseEvent) => {\n    this.setValue(event.latLng)\n  }\n\n  setValue(geoPoint: google.maps.LatLng) {\n    if (this.props.onChange) {\n      this.props.onChange(geoPoint)\n    }\n  }\n\n  render() {\n    const {api, defaultZoom, value, onChange} = this.props\n    return (\n      <GoogleMap\n        api={api}\n        location={this.getCenter()}\n        onClick={this.handleMapClick}\n        defaultZoom={defaultZoom}\n      >\n        {(map) => (\n          <>\n            <SearchInput api={api} map={map} onChange={this.handlePlaceChanged} />\n            {value && (\n              <Marker\n                api={api}\n                map={map}\n                position={value}\n                onMove={onChange ? this.handleMarkerDragEnd : undefined}\n              />\n            )}\n          </>\n        )}\n      </GoogleMap>\n    )\n  }\n}\n","import styled from 'styled-components'\n\nexport const PreviewImage = styled.img`\n  width: 100%;\n  height: auto;\n  vertical-align: top;\n`\n\nexport const DialogInnerContainer = styled.div`\n  height: 40rem;\n  width: 50rem;\n`\n","import React from 'react'\nimport {uniqueId} from 'lodash'\nimport {Box, Grid, Button, Dialog} from '@sanity/ui'\nimport {TrashIcon, EditIcon} from '@sanity/icons'\n// @ts-expect-error TODO: remove the types eventually\nimport config from 'config:@sanity/google-maps-input'\nimport {ChangeIndicatorCompareValueProvider, ChangeIndicator} from '@sanity/base/_unstable'\nimport {FormFieldSet, ObjectInputProps, set, setIfMissing, unset} from '@sanity/base/form'\nimport {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'\nimport {Geopoint, GeopointSchemaType} from '../types'\nimport {GeopointSelect} from './GeopointSelect'\nimport {PreviewImage, DialogInnerContainer} from './GeopointInput.styles'\n\nconst getStaticImageUrl = (value) => {\n  const loc = `${value.lat},${value.lng}`\n  const params = {\n    key: config.apiKey,\n    center: loc,\n    markers: loc,\n    zoom: 13,\n    scale: 2,\n    size: '640x300',\n  }\n\n  const qs = Object.keys(params).reduce((res, param) => {\n    return res.concat(`${param}=${encodeURIComponent(params[param])}`)\n  }, [] as string[])\n\n  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`\n}\n\ntype GeopointInputProps = ObjectInputProps<Geopoint, GeopointSchemaType>\n\n// @todo\n// interface Focusable {\n//   focus: () => void\n// }\ntype Focusable = any\n\ninterface InputState {\n  modalOpen: boolean\n}\n\nclass GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {\n  _geopointInputId = uniqueId('GeopointInput')\n\n  static defaultProps = {\n    validation: [],\n  }\n\n  editButton: Focusable | undefined\n\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      modalOpen: false,\n    }\n  }\n\n  setEditButton = (el: Focusable) => {\n    this.editButton = el\n  }\n\n  focus() {\n    if (this.editButton) {\n      this.editButton.focus()\n    }\n  }\n\n  handleToggleModal = () => {\n    this.setState((prevState) => ({modalOpen: !prevState.modalOpen}))\n  }\n\n  handleCloseModal = () => {\n    this.setState({modalOpen: false})\n  }\n\n  handleChange = (latLng: google.maps.LatLng) => {\n    const {schemaType, onChange} = this.props\n    onChange([\n      setIfMissing({\n        _type: schemaType.name,\n      }),\n      set(latLng.lat(), ['lat']),\n      set(latLng.lng(), ['lng']),\n    ])\n  }\n\n  handleClear = () => {\n    const {onChange} = this.props\n    onChange(unset())\n  }\n\n  render() {\n    const {value, schemaType, readOnly, compareValue} = this.props\n\n    const {modalOpen} = this.state\n\n    if (!config || !config.apiKey) {\n      return (\n        <div>\n          <p>\n            The <a href=\"https://sanity.io/docs/schema-types/geopoint-type\">Geopoint type</a> needs\n            a Google Maps API key with access to:\n          </p>\n          <ul>\n            <li>Google Maps JavaScript API</li>\n            <li>Google Places API Web Service</li>\n            <li>Google Static Maps API</li>\n          </ul>\n          <p>\n            Please enter the API key with access to these services in\n            <code style={{whiteSpace: 'nowrap'}}>\n              `&lt;project-root&gt;/config/@sanity/google-maps-input.json`\n            </code>\n          </p>\n        </div>\n      )\n    }\n\n    return (\n      <>\n        {value && (\n          <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>\n            <ChangeIndicator compareDeep>\n              <PreviewImage src={getStaticImageUrl(value)} alt=\"Map location\" />\n            </ChangeIndicator>\n          </ChangeIndicatorCompareValueProvider>\n        )}\n\n        {!readOnly && (\n          <Box marginTop={4}>\n            <Grid columns={2} gap={2}>\n              <Button\n                mode=\"ghost\"\n                icon={value && EditIcon}\n                padding={3}\n                ref={this.setEditButton}\n                text={value ? 'Edit' : 'Set location'}\n                onClick={this.handleToggleModal}\n              />\n\n              {value && (\n                <Button\n                  tone=\"critical\"\n                  icon={TrashIcon}\n                  padding={3}\n                  mode=\"ghost\"\n                  text={'Remove'}\n                  onClick={this.handleClear}\n                />\n              )}\n            </Grid>\n          </Box>\n        )}\n\n        {modalOpen && (\n          <Dialog\n            id={`${this._geopointInputId}_dialog`}\n            onClose={this.handleCloseModal}\n            header=\"Place the marker on the map\"\n            width={1}\n          >\n            <DialogInnerContainer>\n              <GoogleMapsLoadProxy>\n                {(api) => (\n                  <GeopointSelect\n                    api={api}\n                    value={value || undefined}\n                    onChange={readOnly ? undefined : this.handleChange}\n                    defaultLocation={config.defaultLocation}\n                    defaultZoom={config.defaultZoom}\n                  />\n                )}\n              </GoogleMapsLoadProxy>\n            </DialogInnerContainer>\n          </Dialog>\n        )}\n      </>\n    )\n  }\n}\n\nexport default GeopointInput\n"],"names":["React"],"mappings":"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"}

package/package.json

@@ -1,13 +1,46 @@
 {
   "name": "@sanity/google-maps-input",
-  "version": "2.29.2",
+  "version": "2.29.4-purple-unicorn.648+c8cbef48aa",
   "description": "Sanity plugin providing input handlers for geo-related input types using Google Maps",
-  "main": "lib/index.js",
-  "types": "./dist/dts",
+  "main": "lib/input/GeopointInput.cjs",
+  "module": "lib/input/GeopointInput.js",
+  "exports": {
+    "./input/GeopointInput": {
+      "source": "./src/input/GeopointInput.tsx",
+      "require": "./lib/input/GeopointInput.cjs",
+      "default": "./lib/input/GeopointInput.js"
+    },
+    "./diff/resolver": {
+      "source": "./src/diff/resolver.ts",
+      "require": "./lib/diff/resolver.cjs",
+      "default": "./lib/diff/resolver.js"
+    }
+  },
+  "types": "./lib/dts/src/input/GeopointInput.d.ts",
+  "//": "the typesVersion config below is a workaround for TypeScript's lack of support for package exports",
+  "typesVersions": {
+    "*": {
+      "input/GeopointInput": [
+        "./lib/dts/src/input/GeopointInput.d.ts"
+      ],
+      "schema": [
+        "./lib/dts/src/schema.d.ts"
+      ],
+      "diff/resolver": [
+        "./lib/dts/src/diff/resolver.d.ts"
+      ]
+    }
+  },
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib dest"
+    "build": "../../../bin/pkg-utils bundle",
+    "clean": "rimraf lib",
+    "_exports:check": "../../../bin/pkg-utils exports-check",
+    "exports:clean": "../../../bin/pkg-utils exports-clean",
+    "exports:generate": "../../../bin/pkg-utils exports-generate",
+    "postbuild": "run-s exports:generate",
+    "watch": "../../../bin/pkg-utils bundle --watch"
   },
   "keywords": [
     "sanity",
@@ -19,17 +52,18 @@
     "sanity-plugin"
   ],
   "dependencies": {
-    "@sanity/field": "2.29.2",
-    "@sanity/icons": "^1.2.1",
-    "@sanity/types": "2.28.0",
-    "@sanity/ui": "^0.37.2",
-    "lodash": "^4.17.15",
+    "@sanity/icons": "^1.2.8",
+    "@sanity/types": "2.29.4-purple-unicorn.648+c8cbef48aa",
+    "@sanity/ui": "^0.37.8",
+    "lodash": "^4.17.21",
     "rxjs": "^6.5.3"
   },
   "devDependencies": {
-    "@sanity/base": "2.29.2",
+    "@sanity/base": "2.29.4-purple-unicorn.648+c8cbef48aa",
     "@types/googlemaps": "^3.43.0",
-    "rimraf": "^2.7.1"
+    "react": "17.0.2",
+    "rimraf": "^3.0.2",
+    "styled-components": "^5.2.0"
   },
   "peerDependencies": {
     "@sanity/base": "^2.0.0",
@@ -46,5 +80,5 @@
     "url": "https://github.com/sanity-io/sanity/issues"
   },
   "homepage": "https://www.sanity.io/",
-  "gitHead": "65f337e037e7690514cf37f0038c3d58a8f4d11e"
+  "gitHead": "c8cbef48aaef4d7d1471d74f2f8146631e22aa0a"
 }

package/src/@types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const styles: Record<string, string>
+  export default styles
+}

package/src/diff/GeopointArrayDiff.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import {
+  ArrayDiff,
+  ObjectDiff,
+  Diff,
+  DiffProps as GenericDiffProps,
+  DiffComponent,
+} from '@sanity/base/_unstable'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {GoogleMap} from '../map/Map'
+import {Geopoint} from '../types'
+import {GeopointMove} from './GeopointMove'
+import {RootContainer} from './GeopointFieldDiff.styles'
+
+export type DiffProps = GenericDiffProps<ArrayDiff<Geopoint>>
+
+export const GeopointArrayDiff: DiffComponent<ArrayDiff<Geopoint>> = ({diff, schemaType}) => {
+  return (
+    <RootContainer>
+      <GoogleMapsLoadProxy>
+        {(api) => <GeopointDiff api={api} diff={diff} schemaType={schemaType} />}
+      </GoogleMapsLoadProxy>
+    </RootContainer>
+  )
+}
+
+function GeopointDiff({api, diff}: DiffProps & {api: typeof window.google.maps}) {
+  const fromValue = (diff.fromValue || []).filter(hasCoordinates)
+  const toValue = (diff.toValue || []).filter(hasCoordinates)
+  if (fromValue.length === 0 && toValue.length === 0) {
+    return null
+  }
+
+  const bounds = getBounds(fromValue, toValue, api)
+  return (
+    <GoogleMap
+      api={api}
+      location={bounds.getCenter().toJSON()}
+      mapTypeControl={false}
+      controlSize={20}
+      bounds={bounds}
+    >
+      {(map) => (
+        <>
+          {diff.items.map(({toIndex, diff: pointDiff}) => {
+            if (!isChangeDiff(pointDiff)) {
+              return null
+            }
+
+            return (
+              <GeopointMove
+                key={toIndex}
+                api={api}
+                map={map}
+                diff={pointDiff}
+                label={`${toIndex}`}
+              />
+            )
+          })}
+        </>
+      )}
+    </GoogleMap>
+  )
+}
+
+function isChangeDiff(diff: Diff): diff is ObjectDiff<Geopoint> {
+  return diff.action !== 'unchanged' && diff.type === 'object'
+}
+
+function hasCoordinates(point: Partial<Geopoint>): point is Geopoint {
+  return typeof point.lat === 'number' && typeof point.lng === 'number'
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral[] | null | undefined,
+  toValue: google.maps.LatLngLiteral[] | null | undefined,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  const bounds = new api.LatLngBounds()
+  const points = [...(fromValue || []), ...(toValue || [])]
+  points.forEach((point) => bounds.extend(point))
+  return bounds
+}

package/src/diff/GeopointFieldDiff.styles.tsx

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+export const RootContainer = styled.div`
+  position: relative;
+  min-height: 200px;
+
+  &:empty {
+    background-color: var(--card-skeleton-color-from);
+    display: table;
+    width: 100%;
+  }
+
+  &:empty:after {
+    content: 'Missing/invalid data';
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    position: relative;
+  }
+`

package/src/diff/GeopointFieldDiff.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import {
+  DiffComponent,
+  ObjectDiff,
+  DiffProps as GenericDiffProps,
+  DiffTooltip,
+  getAnnotationAtPath,
+} from '@sanity/base/_unstable'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {GoogleMap} from '../map/Map'
+import {Geopoint} from '../types'
+import {GeopointMove} from './GeopointMove'
+import {RootContainer} from './GeopointFieldDiff.styles'
+
+export type DiffProps = GenericDiffProps<ObjectDiff<Geopoint>>
+
+export const GeopointFieldDiff: DiffComponent<ObjectDiff<Geopoint>> = ({diff, schemaType}) => {
+  return (
+    <RootContainer>
+      <GoogleMapsLoadProxy>
+        {(api) => <GeopointDiff api={api} diff={diff} schemaType={schemaType} />}
+      </GoogleMapsLoadProxy>
+    </RootContainer>
+  )
+}
+
+function GeopointDiff({api, diff}: DiffProps & {api: typeof window.google.maps}) {
+  const {fromValue, toValue} = diff
+  const annotation =
+    getAnnotationAtPath(diff, ['lat']) ||
+    getAnnotationAtPath(diff, ['lng']) ||
+    getAnnotationAtPath(diff, [])
+
+  const center = getCenter(diff, api)
+  const bounds = fromValue && toValue ? getBounds(fromValue, toValue, api) : undefined
+
+  return (
+    <DiffTooltip annotations={annotation ? [annotation] : []} description={getAction(diff)}>
+      <div>
+        <GoogleMap
+          api={api}
+          location={center}
+          mapTypeControl={false}
+          controlSize={20}
+          bounds={bounds}
+          scrollWheel={false}
+        >
+          {(map) => <GeopointMove api={api} map={map} diff={diff} />}
+        </GoogleMap>
+      </div>
+    </DiffTooltip>
+  )
+}
+
+function getBounds(
+  fromValue: google.maps.LatLngLiteral,
+  toValue: google.maps.LatLngLiteral,
+  api: typeof window.google.maps
+): google.maps.LatLngBounds {
+  return new api.LatLngBounds().extend(fromValue).extend(toValue)
+}
+
+function getCenter(
+  diff: DiffProps['diff'],
+  api: typeof window.google.maps
+): google.maps.LatLngLiteral {
+  const {fromValue, toValue} = diff
+  if (fromValue && toValue) {
+    return getBounds(fromValue, toValue, api).getCenter().toJSON()
+  }
+
+  if (fromValue) {
+    return fromValue
+  }
+
+  if (toValue) {
+    return toValue
+  }
+
+  throw new Error('Neither a from or a to value present')
+}
+
+function getAction(diff: ObjectDiff<Geopoint>) {
+  const {fromValue, toValue} = diff
+  if (fromValue && toValue) {
+    return 'Moved'
+  } else if (fromValue) {
+    return 'Removed'
+  } else if (toValue) {
+    return 'Added'
+  }
+
+  return 'Unchanged'
+}

package/src/diff/GeopointMove.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import {useUserColor, ObjectDiff} from '@sanity/base/_unstable'
+import {Marker} from '../map/Marker'
+import {Arrow} from '../map/Arrow'
+import {Geopoint} from '../types'
+
+interface Props {
+  api: typeof window.google.maps
+  map: google.maps.Map
+  diff: ObjectDiff<Geopoint>
+  label?: string
+}
+
+export function GeopointMove({diff, api, map, label}: Props) {
+  const {fromValue: from, toValue: to} = diff
+  const annotation = diff.isChanged ? diff.annotation : undefined
+  const userColor = useUserColor(annotation ? annotation.author : null) || undefined
+  const fromRef = React.useRef<google.maps.Marker>()
+  const toRef = React.useRef<google.maps.Marker>()
+
+  return (
+    <>
+      {from && (
+        <Marker
+          api={api}
+          map={map}
+          position={from}
+          zIndex={0}
+          opacity={0.55}
+          markerRef={fromRef}
+          color={userColor}
+        />
+      )}
+      {from && to && <Arrow api={api} map={map} from={from} to={to} zIndex={1} color={userColor} />}
+      {to && (
+        <Marker
+          api={api}
+          map={map}
+          position={to}
+          zIndex={2}
+          markerRef={toRef}
+          label={label}
+          color={userColor}
+        />
+      )}
+    </>
+  )
+}

package/src/diff/resolver.ts

@@ -0,0 +1,21 @@
+import {DiffComponentResolver} from '@sanity/base/_unstable'
+import {GeopointFieldDiff} from './GeopointFieldDiff'
+import {GeopointArrayDiff} from './GeopointArrayDiff'
+
+const diffResolver: DiffComponentResolver = function diffResolver({schemaType}) {
+  if (schemaType.name === 'geopoint') {
+    return GeopointFieldDiff
+  }
+
+  if (
+    schemaType.jsonType === 'array' &&
+    schemaType.of.length === 1 &&
+    schemaType.of[0].name === 'geopoint'
+  ) {
+    return GeopointArrayDiff
+  }
+
+  return undefined
+}
+
+export default diffResolver

package/src/input/GeopointInput.styles.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const PreviewImage = styled.img`
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+`
+
+export const DialogInnerContainer = styled.div`
+  height: 40rem;
+  width: 50rem;
+`

package/src/input/GeopointInput.tsx

@@ -0,0 +1,185 @@
+import React from 'react'
+import {uniqueId} from 'lodash'
+import {Box, Grid, Button, Dialog} from '@sanity/ui'
+import {TrashIcon, EditIcon} from '@sanity/icons'
+// @ts-expect-error TODO: remove the types eventually
+import config from 'config:@sanity/google-maps-input'
+import {ChangeIndicatorCompareValueProvider, ChangeIndicator} from '@sanity/base/_unstable'
+import {FormFieldSet, ObjectInputProps, set, setIfMissing, unset} from '@sanity/base/form'
+import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
+import {Geopoint, GeopointSchemaType} from '../types'
+import {GeopointSelect} from './GeopointSelect'
+import {PreviewImage, DialogInnerContainer} from './GeopointInput.styles'
+
+const getStaticImageUrl = (value) => {
+  const loc = `${value.lat},${value.lng}`
+  const params = {
+    key: config.apiKey,
+    center: loc,
+    markers: loc,
+    zoom: 13,
+    scale: 2,
+    size: '640x300',
+  }
+
+  const qs = Object.keys(params).reduce((res, param) => {
+    return res.concat(`${param}=${encodeURIComponent(params[param])}`)
+  }, [] as string[])
+
+  return `https://maps.googleapis.com/maps/api/staticmap?${qs.join('&')}`
+}
+
+type GeopointInputProps = ObjectInputProps<Geopoint, GeopointSchemaType>
+
+// @todo
+// interface Focusable {
+//   focus: () => void
+// }
+type Focusable = any
+
+interface InputState {
+  modalOpen: boolean
+}
+
+class GeopointInput extends React.PureComponent<GeopointInputProps, InputState> {
+  _geopointInputId = uniqueId('GeopointInput')
+
+  static defaultProps = {
+    validation: [],
+  }
+
+  editButton: Focusable | undefined
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      modalOpen: false,
+    }
+  }
+
+  setEditButton = (el: Focusable) => {
+    this.editButton = el
+  }
+
+  focus() {
+    if (this.editButton) {
+      this.editButton.focus()
+    }
+  }
+
+  handleToggleModal = () => {
+    this.setState((prevState) => ({modalOpen: !prevState.modalOpen}))
+  }
+
+  handleCloseModal = () => {
+    this.setState({modalOpen: false})
+  }
+
+  handleChange = (latLng: google.maps.LatLng) => {
+    const {schemaType, onChange} = this.props
+    onChange([
+      setIfMissing({
+        _type: schemaType.name,
+      }),
+      set(latLng.lat(), ['lat']),
+      set(latLng.lng(), ['lng']),
+    ])
+  }
+
+  handleClear = () => {
+    const {onChange} = this.props
+    onChange(unset())
+  }
+
+  render() {
+    const {value, schemaType, readOnly, compareValue} = this.props
+
+    const {modalOpen} = this.state
+
+    if (!config || !config.apiKey) {
+      return (
+        <div>
+          <p>
+            The <a href="https://sanity.io/docs/schema-types/geopoint-type">Geopoint type</a> needs
+            a Google Maps API key with access to:
+          </p>
+          <ul>
+            <li>Google Maps JavaScript API</li>
+            <li>Google Places API Web Service</li>
+            <li>Google Static Maps API</li>
+          </ul>
+          <p>
+            Please enter the API key with access to these services in
+            <code style={{whiteSpace: 'nowrap'}}>
+              `&lt;project-root&gt;/config/@sanity/google-maps-input.json`
+            </code>
+          </p>
+        </div>
+      )
+    }
+
+    return (
+      <>
+        {value && (
+          <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>
+            <ChangeIndicator compareDeep>
+              <PreviewImage src={getStaticImageUrl(value)} alt="Map location" />
+            </ChangeIndicator>
+          </ChangeIndicatorCompareValueProvider>
+        )}
+
+        {!readOnly && (
+          <Box marginTop={4}>
+            <Grid columns={2} gap={2}>
+              <Button
+                mode="ghost"
+                icon={value && EditIcon}
+                padding={3}
+                ref={this.setEditButton}
+                text={value ? 'Edit' : 'Set location'}
+                onClick={this.handleToggleModal}
+              />
+
+              {value && (
+                <Button
+                  tone="critical"
+                  icon={TrashIcon}
+                  padding={3}
+                  mode="ghost"
+                  text={'Remove'}
+                  onClick={this.handleClear}
+                />
+              )}
+            </Grid>
+          </Box>
+        )}
+
+        {modalOpen && (
+          <Dialog
+            id={`${this._geopointInputId}_dialog`}
+            onClose={this.handleCloseModal}
+            header="Place the marker on the map"
+            width={1}
+          >
+            <DialogInnerContainer>
+              <GoogleMapsLoadProxy>
+                {(api) => (
+                  <GeopointSelect
+                    api={api}
+                    value={value || undefined}
+                    onChange={readOnly ? undefined : this.handleChange}
+                    defaultLocation={config.defaultLocation}
+                    defaultZoom={config.defaultZoom}
+                  />
+                )}
+              </GoogleMapsLoadProxy>
+            </DialogInnerContainer>
+          </Dialog>
+        )}
+      </>
+    )
+  }
+}
+
+export default GeopointInput

package/src/input/GeopointSelect.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import {SearchInput} from '../map/SearchInput'
+import {GoogleMap} from '../map/Map'
+import {Marker} from '../map/Marker'
+import {LatLng, Geopoint} from '../types'
+
+const fallbackLatLng: LatLng = {lat: 40.7058254, lng: -74.1180863}
+
+interface SelectProps {
+  api: typeof window.google.maps
+  value?: Geopoint
+  onChange?: (latLng: google.maps.LatLng) => void
+  defaultLocation?: LatLng
+  defaultZoom?: number
+}
+
+export class GeopointSelect extends React.PureComponent<SelectProps> {
+  static defaultProps = {
+    defaultZoom: 8,
+    defaultLocation: {lng: 10.74609, lat: 59.91273},
+  }
+
+  mapRef = React.createRef<HTMLDivElement>()
+
+  getCenter() {
+    const {value = {}, defaultLocation = {}} = this.props
+    const point: LatLng = {...fallbackLatLng, ...defaultLocation, ...value}
+    return point
+  }
+
+  handlePlaceChanged = (place: google.maps.places.PlaceResult) => {
+    if (!place.geometry) {
+      return
+    }
+
+    this.setValue(place.geometry.location)
+  }
+
+  handleMarkerDragEnd = (event: google.maps.MapMouseEvent) => {
+    this.setValue(event.latLng)
+  }
+
+  handleMapClick = (event: google.maps.MapMouseEvent) => {
+    this.setValue(event.latLng)
+  }
+
+  setValue(geoPoint: google.maps.LatLng) {
+    if (this.props.onChange) {
+      this.props.onChange(geoPoint)
+    }
+  }
+
+  render() {
+    const {api, defaultZoom, value, onChange} = this.props
+    return (
+      <GoogleMap
+        api={api}
+        location={this.getCenter()}
+        onClick={this.handleMapClick}
+        defaultZoom={defaultZoom}
+      >
+        {(map) => (
+          <>
+            <SearchInput api={api} map={map} onChange={this.handlePlaceChanged} />
+            {value && (
+              <Marker
+                api={api}
+                map={map}
+                position={value}
+                onMove={onChange ? this.handleMarkerDragEnd : undefined}
+              />
+            )}
+          </>
+        )}
+      </GoogleMap>
+    )
+  }
+}