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

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

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

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

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

WordPress にgooglemapを埋め込む方法

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

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

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

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

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

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

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

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

クラシックエディタ 

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

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

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

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

ブロックエディタ

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

カスタムHTMLを選択

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

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

Simple Map

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

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

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

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

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

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

別の書き方だと

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

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

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

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

パラメータ	デフォルト値	フィルター
height	200px	simplemap_default_height
width	100%	simplemap_default_width
zoom	16	simplemap_default_zoom
breakpoint	480	simplemap_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

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

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

まとめ

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

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