blog

wordpress googlemap埋め込み方法をご紹介

blog

 イベントやお店、セミナー会場の場所などをブログで紹介したい場合、画像だけ提示するよりも、地図の埋め込みを利用することで読者により正確なアクセス情報を提供することが出来ます。

そんな時に役立つツールの1つが「googlemap」です。

googlemapはウェブマッピングの精度が非常に高いです。

そしてgooglemapは、表示された地図情報をズーム対応のままwordpressに埋め込むことが出来ます。

スポンサーリンク

WordPress にgooglemapを埋め込む方法

WordPress にGoogle Map を埋め込む方法は主に2通りあります。

googlemapの埋め込みコードを挿入する 

試しに新宿周辺の地図を埋め込んでみました。

Google マップを開いたら、「共有」をクリックします。

googleのマップ
googleのマップ

「地図を埋め込む」を選択

googleのマップ

「HTMLをコピー」をクリックすればコードがクリップボードにコピーされます。

あとは記事にそのままhtmlを貼り付けるだけです。 

それぞれのエディタでの挿入方法を紹介します。

クラシックエディタ 

投稿画面を開いたら、「挿入」の「メディア」を選択します。

googleマップの埋め込み設定

メディア画面が表示されたら、「埋め込む」のタブを選択し 「OK」を押します。

googleマップの埋め込み設定

するとそのままの状態で埋め込まれます。

googleマップの埋め込み設定

もしくはテキストエディターに直接HTMLを挿入しましょう。

googleマップの埋め込み設定

ブロックエディタ

上部のツールバーもしくはブロック右の+マークをクリックします。

googleマップの埋め込み設定

カスタムHTMLを選択

googleマップの埋め込み設定
googleマップの埋め込み設定

ブロックにHTML を挿入すれば作業完了です。

googleマップの埋め込み設定

プラグインを使ってgooglemapを埋め込む 

Simple Map

マップ埋め込みのプラグイン

WordPress に Google Map を埋め込むことができるプラグイン はいくつかありますが、Simple Mapはシンプルで使いやすいのでおすすめです。 

インストールが完了すると、ダッシュボードの「設定」からプラグインを選択することができるようになります。

マップ埋め込みのプラグイン

画面が開いたら、まずGoogle Maps APIs for Web pageからAPIを取得します。

その後、➁の赤枠にAPI key を入力します。

マップ埋め込みのプラグイン

地図の表示には以下のショートコードを使います。

[map addr="ここにマップ表示させたい住所"]

別の書き方だと

[map]ここにマップ表示させたい住所[/map]

このようにmapタグの間に住所を入力します。

 ※住所は都道府県から入力します。

以下のパラメータを加えると表示を変えることができます。

パラメータデフォルト値フィルター
height200pxsimplemap_default_height
width100%simplemap_default_width
zoom16simplemap_default_zoom
breakpoint480simplemap_default_breakpoint

記述のルールとしては、「map addr」の間もしくは「map」の後にパラメータを挿入します。

例えばwidthであれば

 [map width=”80%” addr="ここにマップ表示させたい住所"]
 [map width=”80%”]ここにマップ表示させたい住所[/map]

という形です。

googlemapをレスポンシブ対応させる方法

レスポンシブ対応とは、デバイスに合わせて要素の表示を変える設計のことを指します。

読者にとって見やすい地図情報を提供するための作業ですので、ぜひ合わせて設定しておきましょう。

以下のCSSとHTMLを追加するだけなので、設定自体は簡単です。

HTML
<div class="googlemap">
<iframe 共有でコピペしたGoogleMapのiframeソース></iframe>
</div>
CSS
.googlemap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.googlemap iframe,
.googlemap object,
.googlemap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

googlemapの埋め込みができるおすすめのプラグイン

Simple Map以外にも効率的にGoogle マップの埋め込みができるプラグインがあります。 

MapPress Maps for WordPress

マップ埋め込みのプラグイン

直感的に扱えるプラグインです。

設定もシンプルで、経路やストリートビュー、航空写真も埋め込み可能です。

Store Locator

マップ埋め込みのプラグイン

指定の場所だけでなく、近くの店舗情報なども合わせて表示することができます。

時間潰しができる場所を紹介する時に役に立ちます。

まとめ

  • googlemapの埋め込み方法はhtmlコードを取得するもしくはプラグインを使うかの2通り
  • 「Simple Map」を使えばショートコードを用いて地図の表示をアレンジすることができる

以上がwordpressにgooglemapを埋め込む方法の解説となります。

ぜひ活用してみましょう。

スポンサーリンク
スポンサーリンク
ちゃんたらブログ
ページトップに戻る
タイトルとURLをコピーしました