#はじめに
おはようございます。ふでばこです。
以前にGoogleMapsAPIを色々使用したことがあるのですが、お店情報とかも取得できるなんて便利すぎないか？とその時かなり感動したんですよ。Googleさん、ありがとう、ってかなり思いました。最近になってQiitaに投稿することを始めたので、せっかくの機会だと思って、GoogleMapsAPIを使った簡単な機能を作ってまとめておいたら後から思い出すとき便利なんじゃないかと思い、作ってまとめてみました。
長いので2回に分けて書きます。

##Github
以下のURLからクローンしていただけると便利です。

git clone https://github.com/Kota-Yamaguchi/StoreSearch.git

本名が見えるけどあまり気にしていません。

#環境構築
何はともあれ、まずはdocker-composeを使用して、Reactの環境を構築してみます。
以下にDockerfileとdocker-compose.ymlの中身について記載します。以下のファイルたちを同じディレクトリにおいてください。

Dockerfile

FROM node:14.8.0  
WORKDIR /usr/src/frontend

docker-compose.yml

version: '3'

services:
  #Node 
  node:
     build:
       context: .
       dockerfile: Dockerfile
     volumes:
      - ./frontend:/usr/src/frontend
     command: sh -c "yarn global add create-react-app ; create-react-app storesearch ; yarn add google-maps-react @material-ui/core @material-ui/icons react-router-dom react-geocode; cd storesearch ; cd storesearch && yarn start"
     ports:
      - "3000:3000"

では以下のコマンドでコンテナを起動してみましょう

terminal

$ docker-compose up

起動が完了したら、Reactが思ったように起動しているか確認するために以下にアクセスしてみましょう
http://localhost:3000

起動していれば以下のような画面が出てくると思います。出てきていれば、Reactの開発環境は完成です。Dockerとても便利だ。

確認できたらCtrl+Cなどで切断しておきましょう。

#GoogleMapsAPIを使用する準備
それでは次はGoogleMapsAPIを使用するためにいくつかGoogleCloudPlatformで色々やっておかないといけない手順があります。
それではやっていきましょう。
まずは以下にアクセスしてください。

Google Cloud
https://cloud.google.com/

1.この中でコンソールを押してください。

2.「新規のプロジェクト選択」があると思うので、そこを押してください。自分のプロジェクト名が出ているのでぼかしています。

3.以下の画面で出てくるので、「新しいプロジェクト」を押してください

4.Places API、Geocodeing API, Maps JavaScript API　を検索してそれぞれのAPIを有効にしてください

5.あとはAPIキーを作成しましょう。メニューバーの「APIとサービス」から、「認証情報」を押して下さい。

6.以下の図のような画面が出たら、「認証情報の作成」を押して、そのあと「APIキーの作成」を押して下さい。

7.以下のような画面が出てくるので、「キーを制限」を押してAPIキーを制限しましょう。APIキーはAPIを使用するときに必要なので、あとで使うことを覚えておいて下さい。

8.Places API、Geocodeing API, Maps JavaScript API　を制限に加えて保存して下さい。これでGoogleMapsAPIを使用する準備は完了です。

#コードの準備

今回はReactアプリを作るのにフレームワークのmaterial-uiを使用します。
GoogleMapsAPIを使用するのには、google-maps, react-geocodeを使用します。
今後、何かアプリを拡張していくことも考えて、react-router-domも入れておきます。
これらのインストールは全部docker-compose起動時にインストールしています。

コードの内容は全て載せませんが、Githubを上げておきますので気になる方はクローンして下さい。以下です。
https://github.com/Kota-Yamaguchi/StoreSearch.git

ではまず
ディレクトリの構成をみてみましょう

がついているところは追加　or　修正が入っています。

tree

storesearch/src
├── App.css
├── App.js
├── App.test.js
├── GoogleMap
│   └── Googlemap.js *
├── HOME.js *
├── Store
│   ├── PlacesApi.js *
│   └── StoreDetail.js *
├── index.css
├── index.js *
├── logo.svg
├── reportWebVitals.js
├── setupTests.js
└── util
    └──  Header.js *
storesearch/public
├── favicon.ico
├── index.html * 
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt

まずはpublic/index.htmlのなかに以下の文の中にAPIキーを書き込んで保存して下さい。
これでPlacesAPIが使用可能になります。

<script src="https://maps.google.com/maps/api/js?v=3.33&key={yourAPIkey}&libraries=places"></script>

その後に、GoogleMap.jsの中身のでも [*******]になっているところにAPIキーを書き込んで保存して下さい。
コードの解説は次回にします。

GoogleMap.js


import React, { Component } from 'react';
import { GoogleApiWrapper, Map, Marker } from 'google-maps-react';
import Geocode from "react-geocode";
class GoogleMap extends Component {
	constructor(props) {
		super(props);
		this.state = {
			lat: 140,
			lng: 35,
		}

	};

	componentDidUpdate(nextProps) {

		if (nextProps.adrress !== this.props.adrress) {
			Geocode.setLanguage("ja");
			Geocode.fromAddress(this.props.adrress).then(
				response => {
					var { lat, lng } = response.results[0].geometry.location;
					console.log(lat, lng);
					this.setState({
						lat: lat,
						lng: lng,
					})
				},
				error => {
					console.error(error);
				}
			);
		
			return true;
		} else {
			return false;
		}

	}

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

		const containerStyle = {
			width: '50vw',
			height: '50vh',
			position: "relative"
		}

		return (

			<Map
				containerStyle={containerStyle}
				google={this.props.google}
				zoom={40}
				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: ("*************************")
})(GoogleMap);

それでは起動してみましょう
クローンしてくださっている方はクローンした後にディレクトリ入っていただいて下記を実行して下さい

terminal


docker-compose up

これで起動が完了しているはずなので、以下にアクセスして下さい
http://localhost:3000/storedetail

すると以下の画面が出てくると思います。

簡単にアプリの説明すると、開いたときには現在地のマップが表示されます。現在地の取得を許可していないときには、灰色の画面が出てくるだけになると思います。許可してもしなくてもいいです。お店検索欄にお店の名前を入力すると、お店の名前と住所と写真、地図情報が更新されます。
それだけのアプリです。

では、お店検索の検索欄があると思うのですが、そこに検索したいお店を入力してください。
ここでは、僕が美味しいと思うコーヒーショップのUNLIMITED COFFEE BARを検索してみたいと思います。

これで完成です。簡単ですが、よく使えるものなのでどうぞ使って下さい。
ちなみにこのお店とても美味しいので、コロナが落ち着いたりしたら行ってみて下さい。

終わりに

お店の情報をまとめたDBを作ったりせずともこのようにGoogleMapsAPIはお店情報からマップ情報まで取得できてしまう素晴らしいAPIです。
次回はコードの解説をチラッとします。

#次回記事

ReactでGoogleMapsAPI を使用した簡単なお店情報検索機能を作成してみる。(2)
https://qiita.com/hudebakononaka/items/b88db913652ac6a6b3f6