ReactでGoogleMapsを使う

はじめに

ReactでGoogleMapsを使う際に、Mapをコンポーネントとして実装するならこれが一番だと思います。
生のJSのように導入しようとしたら、うまくいかなかったのでメモ。

環境構築

1.モジュールをインストールする。
　npm install --save react-google-map react-google-maps-loader
2. APIキーの取得
　ここからAPIキーの取得ができます。

使用例

map.jsx

import React from "react"
import ReactGoogleMapLoader from "react-google-maps-loader"
import ReactGoogleMap from "react-google-map"

const bnCoord = {
  lat: 44.597923,
  lng: 0.873799,
}

const Map = () => (
    <ReactGoogleMapLoader
      params={{
        key: "取得したキーをここに入力する",
      }}
      style={{height: "100%"}}
      render={googleMaps => {
        return (
          googleMaps && (
            <ReactGoogleMap
              googleMaps={googleMaps}
              coordinates={[
                {
                  title: "Bosc Nègre",
                  position: bnCoord,
                },
              ]}
              center={bnCoord}
              zoom={8}
            />
          )
        )
      }}
    />
)

export default Map