Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

WebサイトにGoogleマップを表示しよう!Google Mapsを埋め込み、アクセス地図を設置する方法を解説

コンテンツの作りこみ

ビジネスでサイトを公開していると、お店や会社の場所をGoogleマップで表示させたい!と考えた事があるのではないでしょうか。お店や会社の地図をウェブサイトに埋め込んでおけば、お店・会社に訪問されるお客様はスマートフォンやタブレットで簡単に場所を探す事ができます。

私も会社のサイトには「アクセスマップ」のページにGoogleマップの埋め込みを使用しています。番地だけ表示させるよりも地図を表示させた方が、訪問される方も分かりやすいのは間違いありません。

そこで今回は、GoogleマップをWordPressのサイトに埋め込む方法を解説します。

Googleマップの埋め込み方法

Google Mapを開く

まず最初に、Googleマップにアクセスします。
https://www.google.co.jp/maps

画面左上の入力欄にピン表示させたい場所の住所や名称を入力し、検索します。

Googleマップで目的地を検索したら、左上の三本線マークをクリックします

左側にメニューが表示されますので、「地図を共有または埋め込む」をクリックします。

「リンクを送信する」、「地図を埋め込む」というタブが表示されますので、「地図を埋め込む」を選択します。

Googleマップの埋め込み用のソースコードが表示されますので、「HTMLをコピー」をクリックします。クリックするとソースコードがコピーされますので、後は、Googleマップを表示させたいページにペーストするだけです。

ウェブページに張り付け(投稿・固定ページ共通)

Googleマップを表示させたいページ(投稿・固定ページ共通)を開き、テキストモードにしてからペーストします。

プレビューで表示を確認すると、Googleマップが表示されている事が確認できます。

これで、ウェブサイトにGoogleマップを埋め込む方法は完了です。

 

Googleマップの埋め込みサイズを変更する

Googleマップをコンテンツ部分の幅いっぱいに表示させたい場合は、サイズを調整する必要があります。Googleマップはサイズを自由に変更する事が出来ますので、サイズ変更の方法を解説します。

Googleマップのサイズを変更する方法

Googleマップのソースコードを表示させた際、ソースコードの左側に「中」と書かれている場所がありますので、ここをクリックすると「小」、「中」、「大」、「カスタムサイズ」の4つからサイズを選択できます。

サイズの詳細は下記の通りです。

横400px X 縦300px
横600px X 縦450px
横800px X 縦600px
カスタムサイズ自由に数字を入力

 

ここでサイズを選びましたら、先程と同じ手順でソースコードを貼り付ければその大きさで地図を埋め込むことができます。

カスタムサイズを選択した場合、下記画像のように、好きなサイズを選択することができますので、どんなサイズのテーマにも横幅ピッタリに表示することができます。

ちなみに、「Lightningテーマ」は横幅が758pxなので、下記のように設定すると横幅がぴったりになります(縦は適当です)。

 

最寄駅から最短ルートを表示させる方法

Googleマップはお店や会社の場所を表示させるだけでなく、最寄駅からの最短ルートや距離を表示させる事も出来ます。設定方法は簡単ですので、最寄駅からのルートを表示させたい方は下記手順で設定して下さい。

Googleマップのソースコード表示画面(「地図を埋め込む」画面)で、「ルート」をクリックします。

次に、画面左上の検索蘭に最寄りの駅名を入力します。駅名を入力するとルートが表示されますので、表示されたら左上の三本線マークをクリックします

メニューが開きますので「地図を共有または埋め込む」を選択します。

地図を埋め込むを選択します。

ソースコードが表示されますので、「HTMLをコピー」をクリックして、Googleマップを貼り付けたいページに貼り付けます(「テキストモード」にしてから貼り付ける事をお忘れなく)

下記のように表示されれば設置完了です。

 

まとめ

以上、Googleマップの埋め込む方法について解説致しました。たった数分で簡単にウェブサイトやブログにGoogleマップを埋め込むことができます。

また、ルート表示は道順だけでなく距離も表示させる事が出来るため、訪問されるお客様も分かりやすいと思います。Googleマップを埋め込んでいない人は、是非試してみてください。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
コンテンツの作りこみ
クリエイトエクスプレス