【Laravel】Google Maps Embed APIの導入

• Google Maps Embed API を使って、ローカルアプリに地図を埋め込んだ時のメモ。

デモ

APIとは？

• Application Programming Interfaceの略。
• 別プログラムの機能を呼び出すための命令や関数のこと。

webアプリへの API導入手順

手順	概要
①	APIキーを取得
②	.env ファイルに、環境変数を定義
③	config/services.php で設定 （※ 外部サービスのアカウント情報を設定するためのファイル）
④	ビューにて、config/services.php経由で、環境変数を取得

Google Maps Embed API

• Google Maps Platform
• Maps Embed API の公式ガイド
• 有料サービスだけど、200ドル/月までは無料なので、ローカルで動かす程度ならタダ。

① APIキーの取得

参：Google Maps Embed APIキーの取得方法

1. Google Developers Consoleへアクセスし、「新しいプロジェクト」からプロジェクトを作成（プロジェクト名は適当でok）。
2. 「 Maps Embed API」 と検索。
   「有効にする」をクリック。
3. メニューボタン → 「 APIとサービス 」 → 「認証情報」をクリック。
4. 「認証情報を作成」から、「APIキー」 をクリックすると、発行され、表示してくれる。コピーしとく。
   
5. APIが不正に使用されないように「キーを制限」する。
   • 「アプリケーションの制限」は「HTTPリファラー」
   • 「ウェブサイトの制限」は、「項目を追加」から、URLを入力。
     （※ 開発環境なら、入力しない or http：//localhostでok。本番環境の場合は、必ずURLを制限すること！！）
   • 「APIの制限」もローカルなら指定してもしなくてもok。
6. APIキーをアプリ側に設定： とりあえず、動作確認のため、Bladeに直接APIキーを埋め込んでみる。。

ビューへのAPIキー記述（※動作確認のため、直接書いてみる）

// 'q'パラメーターが渡せてないエラー （ Google Maps Platform rejected your request. Invalid request. Missing the 'q' parameter. ）
<iframe id='map' src='https://www.google.com/maps/embed/v1/place?key=取得したAPIキー;q={{ $shop->address }}'
  width='100%' height='320' frameborder='0'></iframe>
// ok!!!（'q'パラメーターを渡す部分「;」 → 「&」 に変更）
<iframe id='map' src='https://www.google.com/maps/embed/v1/place?key=取得したAPIキー&q={{ $shop->address }}'
  width='50%' height='300' frameborder='0'></iframe>

• 動作確認できたので、環境変数にAPIキーを設定していく。

② 環境変数の定義

環境変数の定義（.envファイル）

GOOGLE_MAP_API="取得したAPIキー"

③ config/services.php での設定

config/services.php（外部サービスの情報を設定するファイル）で読み込む

'google-map' => [
  'apikey' => env('GOOGLE_MAP_API'),
],

④ ビューに表示させる

• ビュー → config/services.php → 環境変数（.env ファイル） → APIキー → Google Map を呼び出すイメージ。

Bladeビュー

<iframe id='map' src='https://www.google.com/maps/embed/v1/place?key={{ config("services.google-map.apikey") }}&q={{ $shop->address }}'
  width='50%' height='300' frameborder='0'></iframe>

• iframeタグ： 指定ページに、他ページを埋め込むためのタグ
  • HTML のインラインのフレーム要素。
  • frameborder属性： 周りの境界線（1：アリ、0：なし）
• src属性の構成は、https://www.google.co.jp/maps/ 部分は、Google Map のアドレス。続けて、APIのキー、地図検索パラメーターを渡してる。