こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回は今さら聞けない「Googleマップ(地図)」を表示する方法をご紹介します!

こんなお悩みありませんか?

・Googleマップをショップに表示したい!
・お店(実店舗)の場所をもっとわかりやすく伝えたい…

Googleマップって?

最近では、お店や企業のサイトの概要ページなどに、この様なネット上の地図が表示されているのをよく見かけますね。これが「Googleマップ」です。

[難易度 ★☆☆ ]
実店舗をお持ちのショップさまに最適!
「Googleマップ」をショップに表示する方法!

それでは早速、みていきましょう!

設定方法

(1)ショップの住所を検索!

Googleマップ】を開き、左上の検索窓にショップの住所や表示したい住所を入力して検索します。

Googleマップ

(2)「メニュー」をクリック!

入力されている住所を確認し、左上の「メニューアイコン」をクリックします。

Googleマップ

(3)「地図を共有または埋め込む」をクリック!

表示されたメニュー内から「地図を共有または埋め込む」をクリックします。

Googleマップ

(4)「埋め込みコード」をコピー!

「地図を埋め込む」タブをクリックし、好みの地図のサイズをプルダウンで選択します。
表示された「埋め込みコード」をコピーします。

サイズ:「小」400×300、「中」600×450、「大」800×600

Googleマップ

▼サイズを設定したい場合

サイズを自由に設定したい場合は「カスタムサイズ」を選択してサイズを変更することができます。

設定したいサイズ(横幅×高さ)を入力して、表示された「埋め込みコード」をコピーします。

Googleマップ

(3)「埋め込みコード」を入力!

▼PCの「ショップについて」ページに埋め込む場合

【ショップ作成】>【ショップ情報の設定】>【会社概要の設定】

『PC表示設定』タブを選択し
「テキスト編集」のエディターにコピーした「埋め込みコード」を入力します。

Googleマップ

↓↓反映後

Googleマップ
サイズ:「カスタムサイズ」760×500 を入力しています。

▼スマホの「ショップについて」ページに埋め込む場合

【ショップ作成】>【ショップ情報の設定】>【会社概要の設定】

『スマートフォン表示設定』タブから「スマホ最適化表示」を選択し
「テキスト編集」のエディターにコピーした「埋め込みコード」を入力します。

Googleマップ

スマホは機種によって画面の大きさが違うので、どの機種でもきれいな幅で表示するにはHTMLとCSSで調整する必要があります。
「埋め込みコード」は、divで囲んで下記のようにCSSも記載してください。

↓↓反映後
Googleマップ

設置完了!

→かんたんですね。

・Googleマップは、MakeShopのシステムに関係なくご利用いただけます。
(商用利用として、会社のパンフレットなど印刷物に利用するのは認められていませんので
 Webに限定して掲載しましょう。参考 :Googleマップガイドライン
・2017年11月時点のご紹介記事となります。

いかがでしたでしょうか。
Googleマップは周辺環境の変化を気にせずに掲載しやすい地図です。
お店にもスムーズに足を運んでもらいやすくなるかと思いますので、実店舗があるショップ様は、ぜひ掲載してみてください。

それではまた!