Help us understand the problem. What is going on with this article?

【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

① 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のキー、地図検索パラメーターを渡してる。
manbolila
プログラミング初心者です。学びや躓いた点を備忘録として投稿していきます。同じ間違いを繰り返さない様に!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away