Google Maps Embed APIを使ってWebサイトに埋め込む方法 ホームページ制作 | 墨田区

Google Maps Embed APIを使ってWebサイトに埋め込む方法

LINEで送る
Pocket

Google Maps Embed APIを使ってWebサイトに埋め込む方法をご紹介します。

「Google Maps Embed API」は、ルート案内や周辺検索など、様々な地図情報をWebサイト上に簡単に埋め込むことができるのが特徴です。このAPIはホントに便利なんですが、なんといっても作成までの手順がわかりにくいんですよねぇ。覚えてしまえばとても簡単なんですが、初めての方はちょっと拒絶したくなるかもしれません。でもプログラミングする必要がないので、操作に慣れてしまえばホント簡単にWebサイト上に地図を配置できます。
Google マップ API V3 を使ったプログラミングはこちら

ここでは「Google Maps Embed API」を使ってサイトに埋め込む方法をできるだけわかりやすく掲載したいと思います。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


Googleアカウントを準備

「Google Maps Embed API」を利用するためには、Googleアカウントが必要です。
持っている方が多いと思いますが、まだ取得していない方はこの機会に取得しましょう。
Google アカウントの作成


Google Developers Consoleにアクセス

「Google Developers Console」とは、GoogleのAPIを利用する開発者のための管理ページです。Googleが提供する様々なAPIを利用することができます。

Googleアカウントでログインした状態で、以下のページにアクセスします。
Google Developers Console


プロジェクトの作成

新しいプロジェクトの作成画面が出てきます。まずはプロジェクトを作らないと始まりません。プロジェクト名に好きな名前を入れて作成ボタンを押下します。プロジェクトIDはランダムで自動発番されるものですので気にしなくても大丈夫です。
※ここでは「TEST」というプロジェクト名にしました。
Google Maps Embed API プロジェクトの作成

しばらくそのままにしておくと、プロジェクトのダッシュボードが表示されます。
Google Maps Embed API プロジェクトのダッシュボード


Google Maps Embed APIを有効化

プロジェクトが作成されたら「Google Maps Embed API」を有効化します。そうなんです、プロジェクトを作っただけでは「Google Maps Embed API」は利用できないんですね。APIを有効にすることで利用できるようになります。

私はこれが最初わからなくて悩みました・・・。

左メニューの「APIと認証」から「API」を選択します。
Google Maps Embed API メニューからAPIを選択

「よく使われているAPI」の右側に「Google Maps API」があります。
下図の「その他」の欄をクリックします。
※検索ボックスに「Google Maps Embed API」と入力しても同じです。
Google Maps Embed API その他欄をクリック

「Google Maps API」を選択します。
Google Maps Embed API を選択

「APIを有効にする」ボタンを押下すれば利用できるようになります。
Google Maps Embed API を有効にする


APIキーを作成

APIを利用するには、「APIキー」が必要となります。
左メニューの「APIと認証」から「認証情報」を選択します。
Google Maps Embed API 認証情報を選択

「認証情報追加」ボタンを押下し、「APIキー」を選択します。
Google Maps Embed API 認証情報追加ボタンを押下してAPIキー選択

今回は、WebサイトにGoogle Mapsを表示させるので「新しいキーの作成」で「ブラウザ キー」を選択します。
※アプリなどを作成する場合、「Androidキー」「iOSキー」を選択します。
Google Maps Embed API ブラウザキーを選択

「ブラウザAPIキーの作成」画面で、まずは名前を設定します。デフォルトでは、「ブラウザキー1」となっていますが、任意の名前を付けられます。ドメイン名などで管理するといいかもしれませんね。ここではデフォルトのまま進めます。

次に「リファラー」の設定をします。リファラーとは、APIキーを使用できるWebサイトのURLのことです。ここに入力したホスト以外のページでは、「Google Maps Embed API」を利用できません。
ここでは「*.saka-en.com/*」と入力していますが、テスト的におこなうのであれば、設定はしなくても構いません。後から変更もできます。
Google Maps Embed API リファラー設定

「作成」ボタンを押下すれば、「APIキー」が作成されます。
Google Maps Embed API APIキー発行

これで「APIキー」が発行されました。「APIキー」は秘密にする必要はありません。地図を埋め込んだ時点で、ソースが丸見えになります。他のサイトから勝手に利用されたくない場合は、「リファラー」を設定しましょう。


WebサイトにGoogle Maps Embed APIを埋め込み

「APIキー」が作成できたら、いよいよ地図をWebサイトに埋め込みます。

埋め込む前に、埋め込める「Google Maps」の特徴を抑えておきましょう。
埋め込みできる種類は下表のように5種類あります。

place指定した場所にマーカーを付ける。
search指定した条件の検索結果を表示する。
directions指定したルート(出発地から目的地)を表示する。
viewマーカーなしのシンプルな埋め込み地図を表示する。
streetviewストリートビューを表示する。

今回は「directions」を使ってルートを表示する方法をご紹介します。

まずは、「Quick Start Build a Map」へアクセスしましょう。
Quick Start Build a Map Google Maps Embed API Google Developers
Quick Start Build a MapへアクセスQuick Start Build a Map

「Show driving directions」を選択すると、Origin(出発地)とDestination(目的地)を入力する欄が表示されます。ここでは「Origin」を「東京駅」、「Destination」を「東京スカイツリー」としました。
Quick Start Build a Map Show driving directions入力

入力が終わると、下に地図が表示されます。地図の内容に問題がなければ「Looks good!」ボタンを押下します。

「APIキー」の入力を求められるので、先ほど作成した「APIキー」をコピペして、「Done」ボタンを押下します。
Quick Start Build a Map APIキー入力

地図ソースが表示されるので、コピペしてWebサイトに貼り付けます。表示の確認ができれば、作業はおしまいです。ちなみに「APIキー」の反映には結構時間がかかります。私の場合30分くらいかかったかなぁ・・・。それまでアクセス拒否されたようなメッセージが出ますが、気長に待ちましょう。

サンプルとして東京駅からスカイツリーまでのルートを貼っておきます。



まとめ

「Google Maps Embed API」はホント便利です。プログラミングなしで、クオリティの高い地図がWebサイト上に表示できるのは非常にメリットが高いと思います。

コーポレートサイトなどではアクセスマップを作るケースが多いですが、これを使えば画像で地図を作るより作業時間を大幅に短縮できて、より分かりやすい地図を提供できるのではないでしょうか。
また、ストリートビューは閲覧者が自由に操作できますから、地図を見るのが苦手な方でも目的地周辺がイメージしやすいのではないかと思います。

皆さんもぜひ試してみてください。


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL