WordPress

【WordPress】Google Mapの画像を埋め込む方法(プラグインなし)

サイト運営をしていると企業や観光地、お店の場所をサイト内に掲載するシーンがあると思います。

そんな時はGoogle Mapを埋め込みましょう。

住所をテキストで記載するより、Google Mapを埋め込む方が視覚的に分かりやすく、周辺情報も確認が出来て便利です。また、スマホからアクセスしたときはGoogle Mapのアプリからも開くことが出来るので目的地までの行き方や路線情報もあわせて確認がすることができます。

 

手順

(1)Google Mapの画像を埋め込むためのURL取得

(2)WordPressに上記(1)で取得したURLを貼り付け

 

Google Mapの画像を埋め込むためのURL取得方法

Google Mapにアクセス

まずはGoogle Mapにアクセスします。
Google Map

 

埋め込みしたい住所の入力

左上の検索欄(Googleマップを検索する)に、埋め込みしたい住所を入力します。住所が分からない場合は建物名や店名でも検索することができます。
検索結果が表示されるとその場所に赤いピン(マーカー)がセットされます。
Google MAP住所入力

 

共有ボタンをクリック

Google Map左側にあるサイドパネルの「共有」ボタンをクリックします。

この共有ボタンはFacebookやTwtterでリンクを共有したいときにも使うボタンです。リンク先のURLの表示、コピーをしたい時に利用するボタンです。
Google Map共有

 

「地図を埋め込む」をクリック

デフォルト表示だと通常のURLをコピーできる画面になります。

このURLは以前は長いパラメーターになっており、短縮URLにしたい場合は別途「短縮URL」のチェックボックスにチェックをいれて短縮URLを発行していましたが、現在(2019年12月)は自動的に短縮URL発行になります。
Google Map地図を埋め込み

 

地図の大きさを調整

埋め込みをしたときの地図の大きさ(縮尺)を調整することができます。(デフォルトは「中」です)

カスタム設定も出来るので希望の大きさ(縮尺)に調整します。
Google Map地図大きさ1 Google Map地図大きさ2

 

WordPressにGoogle Map画像のURLを埋め込む方法

コピーしたGoogle Mapの地図画像のURL(HTML)をWordPressの編集画面に貼り付けていきます。

「ビジュアル」画面ではソースコードとして認識されませんので、右上のタブの選択から「テキスト」を選択して貼り付けます。
Google Map貼り付け方1

「テキスト」で編集が終わったら、「ビジュアル」に選択を戻します。

するとソースコードが読み込まれGoogle Mapの画像が読み込まれた状態で表示されていることを確認することができます。

 

実際に埋め込みした画像が以下です。

■埋め込みした画像

 

まとめ

操作方法はいたって簡単です。一度覚えてしまえば、クリックとコピーと貼り付けをするだけで簡単にGoogle Mapを埋め込みすることができます。便利な機能ですのでぜひ覚えておきましょう。

 

関連の書籍

 

-WordPress

Copyright© クキブロ -お得な情報みいつけた- , 2020 All Rights Reserved Powered by AFFINGER5.