今回はウェブサイトでGoogleマップの追加の仕方についてやっていきます。
Googleマップの埋め込みの方法といってもいろんな種類の方法があります。
その中で今回はAPIを使わない方法で追加していくようにします。
APIを使わない方法ウを選んだのは、単純にデザイン性の理由です。
どんな感じで違うのかは、この記事の中でやっていきたいと思います。
この記事でわかること
・Googleマップをウェブサイトに埋め込む方法
今回もこんな感じでやっていきたいと思います。
Googleマップの埋め込み方法
Googleマップの様々な埋め込み方法
Reactを使ってGoogleマップをウェブサイトに埋め込む方法は様々な方法があります。
google-map-reactを使った埋め込む方法、Maps Embed API iframe Generatorを使って埋め込む方法を紹介していきます。
gatsby-source-googlemaps-geocodingを使ったgatsbyjsでの方法もありますが、そちらは参考できるサイトが少なかったので、やめました。主に使われているのは上記の2点ですね。
その前にGoogleAPIキーの作成方法を少し紹介します。
GoogleAPIキーの作成方法
APIキーは、使用と請求の目的でプロジェクトに関連付けられたリクエストを認証する一意の識別子です。プロジェクトに関連付けられたAPIキーが少なくとも1つ必要です。
APIキーを作成するには：
-
GCPコンソールの[プロジェクト選択]ページで、APIキーを追加するGoogleCloudプロジェクトを選択または作成します。
-
[APIとサービス]> [認証情報]ページに移動します。
- 上の
認証情報のページ、クリックした認証情報>APIキーを作成します。
[ APIキーの作成]ダイアログに、新しく作成したAPIキーが表示されます。 - [閉じる]を クリックします。
新しいAPIキーは、[認証情報]ページの[ APIキー]の下に一覧表示されます。
（本番環境で使用する前に、APIキーを制限することを忘れないようにしましょう。）
google-map-react
まずは下記のgoogle-map-reactをインストールしましょう。
$ npm install --save google-map-react
// どちらかをインストール
$ yarn add google-map-reactインストールできたら、GoogleMap.jsというファイルを作って下記のように書き込んでいきましょう。
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class SimpleMap extends Component {
static defaultProps = {
center: {
//センターにもってきたい経度と緯度を記述
lat: 59.95,
lng: 30.33
},
zoom: 11
};
render() {
return (
//サイズの大きさを指定
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: /* APIキーを入力する */ }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
>
<AnyReactComponent
//マーカーの緯度と経度
lat={59.955413}
lng={30.337844}
text="マーカー"
/>
</GoogleMapReact>
</div>
);
}
}
export default SimpleMap;これでマップがこれで登録できるはずです。
経度と緯度についてですが、googleマップのURLから調べる方法があります。
新宿西口を表示したい場合のと経度はこうなります。
緯度：35.6913641
経度：139.6971856
これで無事に新宿西口が表示されるはずです。
デザインについては下記のようになります。※他のサイトから画像を引用
ちょっと寂しいので、自分でデザインを施していく必要がありますね。
細かい部分は公式サイトに書いてありますので、参考にしてみてください。
google-map-react
Isomorphic component that allows rendering react components on a google map
Maps Embed API iframe Generator
この方法は僕も実際に使った方法です。
実際にGoogleマップで作成されたコードを自分のサイトに埋め込むだけで出来ます。
APIキーも使わないし、デザインも出来ているのですぐに実装することが可能です。
まずは、Maps Embed API iframe Generatorで載せたい住所や場所を入力します。
新宿西口と検索するとその場所が反映されます。
Looks good!というボタンを押すと、APIキーを入力する部分があるので、取得したAPIを入力します。
下の部分に書いてあるコードを自分のサイトに記入することでGoogleマップを表示することができます。
これで新宿西口のマップが表示されるはずです。
style="border:0"の部分がgatsbyだとエラーになるかもしれないので、cssに変更してみてください。
以上でGoogleマップの追加は終わりです。
最後まで読んでいただきありがとうございました。