「Maps Embed API」を利用します。

手順に従い、利用設定とAPIキーを取得してください。

ご利用設定において、クレジットカードの登録が必要となりますが、今回利用する「Maps Embed API」に利用料金は発生しません。

＜目次＞

• ご利用手順
• 【補足】APIキーの取得・確認場所
• Map Embed APIを利用した、表示地図のカスタマイズ方法
  • 「API_KEY」の入力
  • 「MAP_MODE」の入力
  • 「PARAMETERS」の入力
  • 「PARAMETERS」に指定する各種コード・情報の取得方法
  • その他補足事項
    • その他のカスタマイズについて
    • APIキーを利用しない、通常の埋め込みタグでの表示について

関連情報

• 店舗受取のはじめかた －設定編
• 設定＞配送・送料＞店舗受取設定
• 設定＞実店舗＞店舗（よく行くお店）一覧＞店舗設定
• 店舗受取受注後にすべきこと

※Google Cloud Platformの仕様変更、またお使いのアカウント状況により、マニュアルの画像が実際の画面と異なる場合がございます。

（店舗ドメイン）/*

【例】sample.future-shop.jp/*
            

【補足】APIキーの取得・確認場所

APIキーは、以下の場所からいつでも取得・確認可能です。

「Google Cloud Platform」にアカウントの登録が必要です。未登録の場合は、ご利用手順に従いアカウントの登録を完了させてください。

1. Google Cloud Platformにログインします。
   
   
2. 左メニューから「Google Maps Platform」を押下します。（スクロールしていくと現れます。）

3. 左メニューから［認証情報］を押下します。
   ※押下しても、画面が切り替わらず、「Google Maps Platform の使用を開始するには、以下の中からニーズに適した API とサービスを参照して有効にしてください。」と表示される場合は「Maps Embed API」が「無効」になっています。
   「Maps Embed API」を有効にするを参考に「有効」にしてください。
   
   
4. 「APIキー」欄に表示された「Maps Embed API」を押下します。

5. ［APIとサービス］画面が開き、右カラムに「API Key」が表示されます。

以下のコードを参考にしてください。

設定＞店舗（よく行くお店一覧）＞店舗設定-所在地Google Maps Platform利用設定（個別設定）に入力することで表示される地図を補正、カスタマイズできます。

<iframe
width="450" 
height="250" 
src="https://www.google.com/maps/embed/v1/MAP_MODE?PARAMETERS&key=API_KEY" allowfullscreen>
</iframe>

「width="450"（地図の横幅） height="250"（地図の縦幅）」は適宜変更してください。

※ただし地図の大きさは、住所やコメントなど他の表示要素が適切に表示されるよう、futureshopシステムによって最適化されたモーダルの大きさに依存します。 そのため、「width="450"（地図の横幅） height="250"（地図の縦幅）」を指定しても意図通りに表示されない場合もあります。

青文字の「MAP_MODE」「API_KEY」「PARAMETERS」を変更します。

「API_KEY」の入力

店舗が複数ある場合は、「key=API_KEY」には、置換文字{% store_pickup.google_maps_platform_api_key %}を入力することをおすすめします。

APIキーをそのまま入力しても良いですが、再生成した際など全店舗の入力を修正せず、設定＞配送・送料（通常商品）＞店舗受取設定-Google Maps Platform利用設定を変更するのみでご利用いただけるので、便利です。

＜注意事項＞

置換文字を利用する場合は、設定＞配送・送料（通常商品）＞店舗受取設定-Google Maps Platform利用設定に、必ずAPIキーを入力してください。

「MAP_MODE」の入力

「MAP_MODE」に入力する内容は以下をご覧ください。
MODEにより、利用可能な「PARAMETERS」は異なります。それぞれ「利用可能な「PARAMETERS」」欄のリンク先でご確認ください。

「PARAMETERS」の入力

「MAP_MODE」に入力したMODEにより、利用可能な「PARAMETERS」は異なります。

「MAP_MODE」に「place」を利用する場合

カスタマイズサンプル

例えば、以下のように指定した場合の表示は、サンプル（1）のようになります。

サンプルコード：「plus code」を利用

<iframe width="850" height="450"
src="https://www.google.com/maps/embed/v1/place?q=PF4Q%2B4V&center=34.70405678613112,135.4949503555811&zoom=15&maptype=roadmap&key={% store_pickup.google_maps_platform_api_key %}" allowfullscreen>
</iframe>

※置換文字{% store_pickup.google_maps_platform_api_key %}を利用する場合は、設定＞配送・送料（通常商品）＞店舗受取設定-Google Maps Platform利用設定に、必ずAPIキーを入力してください。

＜サンプル（1）＞
「梅田スカイビル」を「plus code」で指定。「グランフロント大阪」を地図の中心に指定。
拡大は「15」に設定。マップタイプは「roadmap（地図）」を指定。

同様な表示を以下のように指定することも可能です。

サンプルコード：「place ID」を利用

<iframe width="850" height="450"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJbyd0kIjmAGAR_crecCbjwlc&center=34.70405678613112,135.4949503555811&zoom=15&maptype=roadmap&key={% store_pickup.google_maps_platform_api_key %}" allowfullscreen>
</iframe>

サンプルコード：「場所の名前」を利用

<iframe width="850" height="450"
src="https://www.google.com/maps/embed/v1/place?q=梅田スカイビル&center=34.70405678613112,135.4949503555811&zoom=15&maptype=roadmap&key={% store_pickup.google_maps_platform_api_key %}" allowfullscreen>
</iframe>

「MAP_MODE」に「view」を利用する場合

カスタマイズサンプル

例えば、以下のように指定した場合の表示は、サンプル（2）のようになります。

サンプルコード

<iframe width="850" height="450" 
src="https://www.google.com/maps/embed/v1/view?center=34.70549004213925, 135.4896419690756&zoom=15&maptype=roadmap&key={% store_pickup.google_maps_platform_api_key %}" allowfullscreen>
</iframe>

置換文字{% store_pickup.google_maps_platform_api_key %}を利用する場合は、設定＞配送・送料（通常商品）＞店舗受取設定-Google Maps Platform利用設定に、必ずAPIキーを入力してください。

＜サンプル（2）＞
「梅田スカイビル」を緯度経度で指定。拡大は「15」に設定。
マップタイプは「roadmap（地図）」を指定。

「PARAMETERS」に指定する各種コード・情報の取得方法

「place ID」の取得方法

1. Find the ID of a particular place（英語）にアクセスします。

2. 赤枠の「Enter a location」に住所、あるいは店舗名を入力します。表示された選択肢から適切なものを選択します。

3. 地図が切り替わり、赤枠部分に「place ID」が表示されます。

4. 実際にfutureshop管理画面に入力するパラメータは、「place?q=place_id:ChIJbyd0kIjmAGAR_crecCbjwlc」です。

「plus code」の取得方法

「緯度・経度」の取得方法

その他補足事項

その他のカスタマイズについて

上記でご紹介したカスタマイズに他、指定した経路を表示する、ストリートビューを表示するなどもございます。

「Map Embed API」を利用したカスタマイズについては、Embedding a map（英語）をご参照ください。

※「Map Embed API」以外を利用してカスタマイズされる際には、ご利用になるAPIをご確認ください。
「Google Maps Platform」には有料のサービスもございます。詳しくはGoogle Maps Platformの料金体系をご覧ください。

APIキーを利用しない、通常の埋め込みタグでの表示について

GoogleMapからの取得する埋め込みタグの利用については、商用サイト上での利用可否についてgoogleの利用規約に明記されておりませんので、futureshopではAPIキーを利用した地図表示（Google Map Platform）をご提供いたします。