ShopifyにGoogleマップを表示させる方法

ShopifyにGoogleマップを表示させる方法

 この記事ではご要望の多いShopifyストアに実店舗の地図を表示する方法にて解説いたします。

 

まずは、意外と知らない！？
グーグルマップの利用料金について。

実は有料です。

1か月$200
無料利用枠あり：
地図の読み込みは 1 か月あたり 28,500 回まで無料です。
中小企業のほとんどは無料枠になるのかな？という印象ですね。

おすすめは後から紹介するiframeで埋め込む方法 です。

 

 

【Google MapsをAPIで設定する方法】

アカウントを持っている場合：

「Google Maps Platform」にログインしてAPIキーをコピーしてくる

 

 ①https://mapsplatform.google.com/intl/ja/　ログインする

 Google管理画面

 

②「鍵を表示します」をクリック

Google管理画面

 ③自分のAPIキーが表示されます。

表示される英数字をコピー。

Google管理画面

 ④Shopifyへ移動してMAPを表示できる該当セクションへ貼り付け

 

 

【まだアカウントを持っていない場合】

①「Google Maps Platform」からアカウントを作成

https://mapsplatform.google.com/intl/ja/

Google API

 

②プロジェクト名を入力して「作成」

Google API

③認証情報を作成

④ APIキーを選択 

google APIキー 

 

 

⑤【すでにアカウントがある場合】の手順へ

 

 

【地図を無料でShopifyに埋め込む方法】

こちらの方法で表示させるストアが多いのではないでしょうか！

 

今回「東京ドームシティ」で作成したいと思います。

 ①GoogleMAPで表示したい住所を検索後

「共有ボタン」をクリック

GoogleMAP

 

②地図を埋め込むを選択

GoogleMAP

 ③HTMLをコピー

GoogleMAP

 

④Shopifyへ移動して”HTMLを埋め込める”セクションに貼り付ける。

今回は「カスタマイズされたliquid」というセクションを使って埋め込みました。

Googlemap

 

設定してみると意外と簡単ですよね！

あと、そのまま貼り付けると横幅がwidth50％に設定されていると思いますので、画面の半分に表示されます。

横幅いっぱいに表示したい場合は、手動で100％に変更してあげてください。CSSに自信がない方はご遠慮なくお問い合わせくださいませ。

 

以上

GoogleMAPの設定手順でした。

 

Shopifyを始める

 

 

 

ブログに戻る