何を作るか

googleMapAPIを使ってgooglemapっぽいのを作りましたので、そのまとめです。
React使いたいな〜って単純な理由でReactで作りましたが、差分更新が簡単にできたので嬉しかったです

長くなってしまうので、とりあえず
- map表示
- 現在地表示
- 吹き出し表示
まで！

環境構築

create-react-appで作っていきます。

create-react-app map
cd map
yarn start

TSで作るなら

create-react-app map --typescript
cd map
yarn start

使用するライブラリはgoogle-map-reactです。
googlemapをReactで扱うにはいろんなライブラリがありますが、単純に参考記事の多さで選びました。
google-map-react 公式

yarn add -D google-map-react
// Typescript使うなら↓
yarn add -D @types/google-map-react

あとはAPIキーを取得しなきゃですが、そこは割愛…

Map表示

直接でも良いですがApp.jsはMapのレンダリングに使います。

App.js

import React, { Component } from "react";
import Maps from "./Maps";

class App extends Component {
  render() {
    return (
      <div>
        <Maps />
      </div>
    );
  }
}

export default App;

Maps.js

import React, { useState, useEffect } from "react";
import GoogleMapReact from "google-map-react";

//APIKEYは""としていれば開発者モードで使えます
const APIKEY = "";

const Maps = () => {
  const [center, setCenter] = useState({ lat: "", lng: "" });
  const [zoom, setZoom] = useState(13);

  return (
    //高さ指定してあげないとMap出ません！
    <div style={{ height: "100vh", width: "100%" }}>
　　　　//google-map-reactからimport!
　　　　//bootstrapURLKeys,center,zoom値があれば表示されます
      <GoogleMapReact
        bootstrapURLKeys={{ key: APIKEY }}
        center={center}
        defaultZoom={zoom}
      >
      </GoogleMapReact>
    </div>
  );
};

export default Maps;

現在地表示

カスタムマーカーを作るのはgoogle-map-reactを使えば簡単にできました！
GoogleMapReactに子コンポーネントとして書き込み、緯度経度を持たせてあげるだけです

Maps.js

<GoogleMapReact
  bootstrapURLKeys={{ key: APIKEY }}
  center={center}
  defaultZoom={zoom}
 >  
    <Marker
     lat={XXXXXXXXX}
     lng={XXXXXXXXX}
    />       
</GoogleMapReact>

これをgeolocationを使って現在地に反映させます。

Maps.js


const Maps = () => {

　//centerなどの値もState管理に
  const [center, setCenter] = useState({ lat: "", lng: "" });
  const [zoom, setZoom] = useState(13);
  const [currentPosition, setCurrentPosition] = useState();

  // 初期表示地点
  const success = data => {
    const currentPosition = {
      lat: data.coords.latitude,
      lng: data.coords.longitude
    };
    setCurrentPosition(currentPosition);
    setCenter(currentPosition);
  };

  //geolocation使えない場合の値を返す
  const error = data => {
    const currentPosition = {
      lat: 34.673542,
      lng: 135.433338
    };
    setCurrentPosition(currentPosition);
    setCenter(currentPosition);
  };
　//初期読み込み時のみgeolocationを動かす
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(success, error);
  }, []);

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: APIKEY }}
        center={center}
        defaultZoom={zoom}
      >
        {currentPosition ? (
          <Marker
            lat={currentPosition.lat}
            lng={currentPosition.lng}
          />
        ) : null}
      </GoogleMapReact>
    </div>
  );
};

export default Maps;

吹き出し表示

Openかどうかをstate管理し、trueであれば表示します

Maps.js

const Maps = () => {

  const [isOpen, setIsOpen] = useState(false);
  const changeState = () => {
    setIsOpen(!isOpen);
  };

  return (
　　　　　：
        {isOpen ? (
          <Baloon lat={currentPosition.lat} lng={currentPosition.lng} />
        ) : null}
      </GoogleMapReact>
    </div>
  );
};

export default Maps;

Maps.js


const Maps = () => {

  const [center, setCenter] = useState({ lat: "", lng: "" });
  const [zoom, setZoom] = useState(13);
  const [currentPosition, setCurrentPosition] = useState();
  const [isOpen, setIsOpen] = useState(false);

  // 初期表示地点
  const success = data => {
    const currentPosition = {
      lat: data.coords.latitude,
      lng: data.coords.longitude
    };
    setCurrentPosition(currentPosition);
    setCenter(currentPosition);
  };

  const error = data => {
    const currentPosition = {
      lat: 34.673542,
      lng: 135.433338
    };
    setCurrentPosition(currentPosition);
    setCenter(currentPosition);
  };
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(success, error);
  }, []);

  const changeState = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: APIKEY }}
        center={center}
        defaultZoom={zoom}
      >
        {currentPosition ? (
          <Marker
            lat={currentPosition.lat}
            lng={currentPosition.lng}
            text="My Marker"
            color="blue"
            changeState={changeState}
          />
        ) : null}
        {isOpen ? (
          <Baloon lat={currentPosition.lat} lng={currentPosition.lng} />
        ) : null}
      </GoogleMapReact>
    </div>
  );
};

export default Maps;

なので全体はこんな感じ↓

Maps.js

import React, { useState, useEffect } from "react";
import GoogleMapReact from "google-map-react";
import "../styles.css";
const APIKEY = "";

const Maps = () => {
  const [center, setCenter] = useState({ lat: 34.665442, lng: 135.432338 });
  const [zoom, setZoom] = useState(13);
  const [currentPosition, setCurrentPosition] = useState();
  const [isOpen, setIsOpen] = useState(false);

  // 初期表示地点
  const success = data => {
    const currentPosition = {
      lat: data.coords.latitude,
      lng: data.coords.longitude
    };
    setCurrentPosition(currentPosition);
    setCenter(currentPosition);
  };

  const error = data => {
    const currentPosition = {
      lat: 34.673542,
      lng: 135.433338
    };
    setCurrentPosition(currentPosition);
    setCenter(currentPosition);
  };
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(success, error);
  }, []);

  const changeState = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: APIKEY }}
        center={center}
        defaultZoom={zoom}
      >
        {currentPosition ? (
          <Marker
            lat={currentPosition.lat}
            lng={currentPosition.lng}
            text="My Marker"
            color="blue"
            changeState={changeState}
          />
        ) : null}
        {isOpen ? (
          <Baloon lat={currentPosition.lat} lng={currentPosition.lng} />
        ) : null}
      </GoogleMapReact>
    </div>
  );
};

export default Maps;

Markerとかは切り分けて普通に作ればOKです！
↓こんな感じに
https://codesandbox.io/embed/google-maps-react-9slxw?fontsize=14&hidenavigation=1&theme=dark

とりあえず基本のところまで書いてみました。
詰まったところいっぱいあるのでかいつまんで残していきます

参考記事

公式
https://github.com/google-map-react/google-map-react/blob/master/API.md#ondragend-map--void

基本表示まで
https://levelup.gitconnected.com/reactjs-google-maps-with-custom-marker-ece0c7d184c4

geolocationで現在地を初期表示に
https://medium.com/@allynak/how-to-use-google-map-api-in-react-app-edb59f64ac9d

高さ固定
https://github.com/tomchentw/react-google-maps/issues/323

googlemapAPIに関するヒントいろいろ
https://www.granfairs.com/blog/staff/google-maps-api-03

ReactHooksでGoogleMapAPIを扱う

何を作るか

環境構築

Map表示

現在地表示

吹き出し表示

参考記事