#はじめに
おはようございます。ふで ばこです。
以前にGoogleMapsAPIを色々使用したことがあるのですが、お店情報とかも取得できるなんて便利すぎないか？とその時かなり感動したんですよ。Googleさん、ありがとう、ってかなり思いました。最近になってQiitaに投稿することを始めたので、せっかくの機会だと思って、GoogleMapsAPIを使った簡単な機能を作ってまとめておいたら後から思い出すとき便利なんじゃないかと思い、作ってまとめてみました。
長いので2回に分けて書きます。
##Github
以下のURLからクローンしていただけると便利です。
git clone https://github.com/Kota-Yamaguchi/StoreSearch.git
本名が見えるけどあまり気にしていません。
#環境構築
何はともあれ、まずはdocker-composeを使用して、Reactの環境を構築してみます。
以下にDockerfileとdocker-compose.ymlの中身について記載します。以下のファイルたちを同じディレクトリにおいてください。
FROM node:14.8.0
WORKDIR /usr/src/frontend
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"
では以下のコマンドでコンテナを起動してみましょう
$ 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 修正が入っています。
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キーを書き込んで保存して下さい。
コードの解説は次回にします。
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);
それでは起動してみましょう
クローンしてくださっている方はクローンした後にディレクトリ入っていただいて下記を実行して下さい
docker-compose up
これで起動が完了しているはずなので、以下にアクセスして下さい
http://localhost:3000/storedetail
すると以下の画面が出てくると思います。
簡単にアプリの説明すると、開いたときには現在地のマップが表示されます。現在地の取得を許可していないときには、灰色の画面が出てくるだけになると思います。許可してもしなくてもいいです。お店検索欄にお店の名前を入力すると、お店の名前と住所と写真、地図情報が更新されます。
それだけのアプリです。
では、お店検索の検索欄があると思うのですが、そこに検索したいお店を入力してください。
ここでは、僕が美味しいと思うコーヒーショップのUNLIMITED COFFEE BARを検索してみたいと思います。
これで完成です。簡単ですが、よく使えるものなのでどうぞ使って下さい。
ちなみにこのお店とても美味しいので、コロナが落ち着いたりしたら行ってみて下さい。
終わりに
お店の情報をまとめたDBを作ったりせずともこのようにGoogleMapsAPIはお店情報からマップ情報まで取得できてしまう素晴らしいAPIです。
次回はコードの解説をチラッとします。
#次回記事
ReactでGoogleMapsAPI を使用した簡単なお店情報検索機能を作成してみる。(2)
https://qiita.com/hudebakononaka/items/b88db913652ac6a6b3f6