React.js内でGoogle Mapの現在地を表示する

#やりたいこと
React.jsとGoogle Map APIを使って現在地を表示させる。

#準備

yarn add google-maps-react

react.jsの環境で使えるライブラリはいくつかありますが、色々試してみて、
google-maps-react（https://www.npmjs.com/package/google-maps-react）
というライブラリが使いやすかったのでこれを採用します。（似たような名称のものがいくつかあります）

#まずはGoogleマップをロード
下のコードをコピペで、東京駅にマーカーがセットされた状態でGoogle Mapが表示されます。
GitHubなど使う場合、APIキーは.envファイルなどの別ファイルに記入してください。

import React, { Component } from 'react';
import { GoogleApiWrapper, Map, Marker } from 'google-maps-react';

class GoogleMap extends Component {
  render() {
    return (
      <Map
        google = { this.props.google }
        zoom = { 14 }
        center = {{ lat: 35.681236, lng: 139.767125 }}
        initialCenter = {{ lat: 35.681236, lng: 139.767125 }}
      >
        <Marker
          title = { "現在地" }
          position = {{ lat: 35.681236, lng: 139.767125 }}
        />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("<Google MapのAPIキーをここにコピペ>")
})(GoogleMap);

#現在地を取得
下のコードをコピペで、現在地を表示してくれます。
navigator.geolocation.getCurrentPosition()を用いて、JavaScript側で現在地を取得しています。

import React, { Component } from 'react';
import { GoogleApiWrapper, Map, Marker } from 'google-maps-react';

class GoogleMap extends Component {
  state = {
    lat: null,
    lng: null
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      this.setState({
        lat: position.coords.latitude,
        lng: position.coords.longitude
      });
      console.log(position.coords);
    },
    (err) => {
      console.log(err);
    })
  }

  render() {
    return (
      <Map
        google = { this.props.google }
        zoom = { 14 }
        center = {{ lat: this.state.lat, lng: this.state.lng }}
        initialCenter = {{ lat: this.state.lat, lng: this.state.lng }}
      >
        <Marker
          title = { "現在地" }
          position = {{ lat: this.state.lat, lng: this.state.lng }}
        />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("<Google MapのAPIキーをここにコピペ>")
})(GoogleMap);

#ポイント

• navigator.geolocation.getCurrentPosition()をcomponentWillMount内に書いてる記事もありましたが、それだとうまく行かなかったので、componentDidMount内に書きました。
• MapコンポーネントにcenterとinitialCenterを両方記載してますが、どちらか片方だとうまく行かないことがありました。

#まとめ
今回はやりたいことを最小構成で実装しましたが、ドキュメント(https://www.npmjs.com/package/react-geocode) を確認しながらいろいろ試してみると面白いです。

#参考

• https://developer.mozilla.org/ja/docs/Web/API/Geolocation/getCurrentPosition
• https://www.npmjs.com/package/react-geocode