初めまして、こんにちは。エンジニアの惠です。
先日参加した「ソリューション開発オフサイト」にて、「Google Mapを埋め込む接客Action」を開発してみましたので、導入方法をご紹介します。

Google MapをWebページへ埋め込むこと自体はiframeでの埋め込みのためシンプルではありますが、これをKARTEの接客アクションで実装することで、Webページ側の修正をすることなく任意の場所へ簡単に（何個でも！）マップを配置することができるようになります。

概要

ユースケース

サイト内の任意の場所へ、任意の住所を指した地図を表示する/地図ポップアップを開くボタンを表示する
店舗一覧（や周辺施設など）のリストに地図を表示する/地図ポップアップを開くボタンを表示する
地点A〜地点Bへのルート表示を含めた地図を表示する

※表示イメージの一例（リスト表示×ルート表示）：
具体的な活用ケース
- 最寄駅〜店舗間のルートを表示する
- 宿泊施設のサイトにて、周辺観光情報や飲食店を紹介する
  - 施設間のルート表示ができることで、利用者の利便性向上に寄与することが期待できます
  - 地図のリンクを開いたユーザーと宿泊予定のユーザーが紐づく場合、オンライン/オフラインにおける関連サービスの展開も検討できるかと思います

導入の流れ

Google Maps Platform の利用設定をする
接客アクションを作成し、配信する

今回のサンプルで使用するKARTEの機能

埋め込み接客アクション
アクションテーブル（※発展サンプルで紹介）

導入手順

Google Maps Platform の利用設定をする

※ 前提条件：利用に際し、Googleアカウントが必要です

Maps Embed API の利用設定をする

https://developers.google.com/maps?hl=ja へアクセスし、「スタートガイド」をクリックします
APIを利用するGoogleアカウントでログインし、Google Cloud Platformの利用設定を行います
- Google Cloud Platformを初めて利用する場合、「アカウント設定を完了」ボタンをクリックし、各種利用規約への同意および課金請求先情報の登録が必要になります。
  - 本ソリューションで利用する「Maps Embed API」は、回数制限なく無償で利用可能です。（2023年7月時点）
    - 参考: Maps Embed API の使用量と請求額
- 必要に応じてプロジェクトの選択を切り替えます。
  - Google Cloud Platformを初めて利用する場合は「My Maps Project」が自動作成・選択されます。
  - Google Cloud Platformを既に利用している場合は、利用中のプロジェクトのいずれかが選択された状態となっています。
「Google Maps Platform を使ってみる」ポップアップが表示されたら、以下の作業をして「GOOGLE MAPS PLATFORMに移動」ボタンをクリックします
- 「このプロジェクトですべてのGoogle Maps APIを有効にします」チェックボックスをOFFにする
- APIキーを控える (Google Maps Platform のナビゲーションメニュー > 鍵と認証情報 > APIキーの編集画面でも取得可能)
Google Cloud Platform 内の検索ボックスへ「Maps Embed API」と入力し、マーケットプレイスの製品ページを開きます
「Maps Embed API」の製品ページにて「有効にする」ボタンをクリックします

APIキーの利用制限を設定する

APIキーの不正利用や誤使用による予期しない課金を防ぐため、利用制限設定を行うことをおすすめします。

❗️ iframeのソースURL内にAPIキーを含めるため、APIキー自体は外部から簡単に確認することができます

Google Maps Platform のナビゲーションメニュー > 鍵と認証情報を開きます
利用制限をかけたいAPIキーの名前をクリックし、編集画面を開きます
「アプリケーションの制限の設定」で「ウェブサイト」を選択し、接客配信先URLを追加します
- 指定ページからのAPIリクエストのみ許可されるようになります。
「API の制限」で「キーを制限」を選択し、セレクトボックスから「Maps Embed API」を選択し、OKをクリックします
- 指定したAPIへのリクエストのみ許可されるようになります。
「保存」ボタンをクリックして変更を保存します

参考: API キーの制限を適用する

接客アクションを作成し、配信する

今回はテンプレート「HTMLを変更・挿入する」を使用してアクションを作成します。

きほんのMap埋め込み接客アクションを作成する

今回はMap表示接客のベースとして、Script内で設定した値に基づくマップソースを生成し、iframeで表示する接客 を作成します。
以下のサンプルでは、地点表示(place)モードとルート表示(directions)モードに対応しています。

接客アクションのカスタマイズ画面で、以下のhtml, css, scriptを記述します。

html

<section class="wrapper flex-center">
	<!-- Map -->
	<iframe
		loading="lazy"
		allowfullscreen
		referrerpolicy="no-referrer-when-downgrade"
		:src="map_source"
		id="map"
	>
	</iframe>
</section>

css

/**
 * flex
 */
.flex-center
{
	display: flex;
	justify-content: center;
	align-items: center;
}

/**
 * common
 */
.wrapper
{
	width: 100vw;
	height: 300px;
}

/**
 * map
 */
#map
{
	width: 80%;
	height: 90%;
	border: 1px solid #999999;
}

script

/**
 * constant definition
 */
var CONST = {
	map: {
		base_url: 'https://www.google.com/maps/embed/v1/',
		api_key: 'xxxxxxxxxx', // Google Maps Platformで取得したAPIキー を設定する
		// マップモード(ピン表示/ルート)
		mode: 'directions', // 'place'(地点表示) または 'directions'(ルート表示) を設定する
		// ピン表示する場所 (or ルート起点)
		place_id: 'ChIJoWCjwuWLGGARLl-ktwyr3KY', // 場所ID
		address: encodeURI('東京都中央区銀座４丁目１−２'), // 住所またはスポット名
		// ルート終点
		dest_place_id: '', // 場所ID
		dest_address: encodeURI('GINZA SIX'), // 住所またはスポット名
		// ルート案内モード(徒歩、車、etc...)
		direction_mode: 'walking', // 'driving', 'walking', 'bicycling', 'transit', 'flying' のいずれかを設定する
	},
	keyword: {
		place: 'place',
		directions: 'directions',
	},
};

/**
 * パラメータセットアップユーティリティ
 */
var PARAMS = {
	setPlace: function (place_id, address) {
		var place = '';
		if (place_id) {
			place = 'place_id:' + place_id;
		} else if (address) {
			place = address;
		}
		return place;
	},
};

/**
 * main stream
 */
function main_stream () {
	// ピン場所orルート起点の指定がなければ接客を表示しない
	if (!CONST.map.place_id && !CONST.map.address) return;
	// ルート表示の場合、ルート終点の指定がなければ接客を表示しない
	if (CONST.map.mode == CONST.keyword.directions && (!CONST.map.dest_place_id && !CONST.map.dest_address)) return;

	var params = [];
	// map.modeによってパラメータ設定を分岐させる
	// 次のmodeに対応: place, directions
	switch (CONST.map.mode) {
		case CONST.keyword.place:
			params = [
				[ 'q', PARAMS.setPlace(CONST.map.place_id, CONST.map.address) ]
			];
			break;
		case CONST.keyword.directions:
			params = [
				[ 'origin', PARAMS.setPlace(CONST.map.place_id, CONST.map.address) ],
				[ 'destination', PARAMS.setPlace(CONST.map.dest_place_id, CONST.map.dest_address) ],
				[ 'mode', CONST.map.direction_mode ]
			];
			break;
		default:
			break;
	}

	// パラメータが無い場合は接客を表示しない
	if (params.length < 1) return;

	// マップソースを生成して接客を表示する
	params = params.map(function (p) {
		return p.join('=');
	});

	var map_source = CONST.map.base_url
					+ CONST.map.mode
					+ '?key=' + CONST.map.api_key
					+ '&' + params.join('&');
	widget.setVal('map_source', map_source);

	widget.show();
}

main_stream();

補足
- 場所ID または 住所 の各値は、指定しない場合は空文字（''）にします。ただし、地図を表示するためにはいずれかの記述が必要です。
- 住所 にはスポット名（〇〇駅、ビル名など）も設定可能です。（Google Mapで検索可能な名称に準拠しています）
- 場所IDは下記ページの検索ツールを使用して取得できます。
  - 参考: 特定のプレイス ID の取得

接客の配信先ページ・埋め込み位置を指定する
1. 接客サービス編集画面にて、配信トリガーに任意のURLを設定します
  - APIキーの利用制限を設定するにてURL制限を設定している場合、許可したURLへ配信されるように設定します。
2. 接客アクションのベーシック編集画面 > 埋め込み設定にて、埋め込み先を設定します
接客を配信する

テストセグメントをつけて接客を公開し、配信を確認してみましょう！

発展

地図ポップアップを表示するボタンを埋め込む

常時表示する地図表示ボタンと、ボタンクリック/タップ時のみ表示するポップアップを実装し埋め込むことで、見たい時だけ見せる地図を設置することができます。
また、クリック/タップ操作を踏んでもらうことで、カスタムイベントの送信も可能になります。
地図を開いたユーザーに対して施策を打ちたい場合に有効な手段となるかと思います。

地図つきのリストを埋め込む

アクションテーブルから住所などを取得して、地図付きのリストを埋め込み表示することも可能です。
表示データの入れ替えはアクションテーブルの更新のみで対応できるため、接客アクション自体の編集はせずに表示データを更新できます。
なお、地図の表示個数が増えるほどページの表示に時間がかかる恐れがありますので、リスト内に地図ポップアップを表示するボタンを埋め込みiframeを1本化するなど、表示件数によっては見せ方を工夫した方がよい場合もあります。

上図リストのテーブルサンプル：

参考ドキュメント

おわりに

私自身、今回初めてGoogle Maps APIに触れましたが、無償利用可能な範囲でも十分利活用が可能であることがわかりました。
また、有償機能についても現時点では毎月$200分のクレジットがサービスされているため、よりカスタマイズした地図表示も気軽に試すことができそうです。
個人的にはある地点の混雑状況を取得して表示できたらおもしろいのではないか…と考えており、しばらくはGoogle Maps Platformで遊んでみたいなと思っています。

KARTEでWebページの任意の箇所にGoogle Mapを動的表示する