GOOGLE_MAP_API_KEY=XXXXXX

import * as React from 'react'
import { render } from 'react-dom'
import Root from './components/index'
// @ts-ignore
import makeAsyncScriptLoader from 'react-async-script'
const URL = `https://maps.googleapis.com/maps/api/js?key=${
  process.env.GOOGLE_MAP_API_KEY
}`
const AsyncScriptRoot = makeAsyncScriptLoader(URL)(Root)
render(<AsyncScriptRoot />, document.getElementById('app'))

진행 상황에 따른 View 분기

export default () => (
  <GeolocationWrapper
    renderProcessView={() => <ProcessView />}
    renderSuccessView={coords => (
      <GoogleMapView coords={coords} />
    )}
    renderErrorView={() => <ErrorView />}
  />
)

export default (props: Props) => {
  const [coords, setCoords] = useState<Coordinates | null>(
    null
  )
  const [error, setError] = useState<PositionError | null>(
    null
  )
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      ({ coords }) => {
        setCoords(coords)
      },
      setError
    )
  }, [])
  return (
    <>
      {useMemo(
        () => {
          if (coords === null) return
          return props.renderSuccessView(coords)
        },
        [coords]
      )}
      {useMemo(
        () => {
          if (error === null) return
          return props.renderErrorView(error)
        },
        [error]
      )}
      {useMemo(
        () => {
          if (!(error === null && coords === null)) return
          return props.renderProcessView()
        },
        [coords, error]
      )}
    </>
  )
}

useEffect 및 GoogleMap API

const View = (props: Props) => {
  const [addressLabel, setAddressLabel] = useState(
    '...取得しています'
  )
  const ref = useRef({} as HTMLDivElement)
  useEffect(
    () => {
      if (ref.current === null) return
      const { latitude, longitude } = props.coords // 取得した現在位置
      const center = { lat: latitude, lng: longitude }
      const mapOptions: google.maps.MapOptions = {
        center,
        zoom: 16
      }
      const map = new google.maps.Map(
        ref.current,
        mapOptions
      )
      const markerOptions: google.maps.MarkerOptions = {
        position: center,
        map
      }
      new google.maps.Marker(markerOptions)
      const geocoder = new google.maps.Geocoder()
      geocoder.geocode({ location: center }, function(
        results,
        status
      ) {
        if (status == google.maps.GeocoderStatus.OK) {
          setAddressLabel(results[1].formatted_address)
        } else {
          setAddressLabel('取得に失敗しました')
        }
      })
    },
    [props.coords]
  )
  return (
    <div className={props.className}>
      <div className="map" ref={ref} />
      <p className="addressLabel">
        現在住所：
        {addressLabel}
      </p>
    </div>
  )
}