ホームページを閲覧中に場所の所在地が知りたいと思ったとき、地図が一緒に載っていると便利ですよね。
最近ではスマホでサイトを閲覧している人も多く、そのままGoogleMapに飛んで情報を調べたいと思う人も多いです。
GoogleMapを埋め込んでおくと、そのままマップのアプリが立ち上がって道案内してくれます。
そこで今回は、ワードプレスにGoogleMapの地図を埋め込む方法について解説していこうと思います。
ワードプレスにGoogleMapの地図を埋め込むメリット
GoogleMapの地図は、知名度が高く利用している人がとても多い地図アプリです。
場所を確認するだけでなく、店舗情報や口コミ、写真などがチェックできるのでとても便利ですよね。
ワードプレスにGoogleMapの地図を埋め込んでおくと、常に最新の状態の情報がチェックできるし、スマホアプリと連携できるので利用者の利便性が向上します。
ちなみに、ワードプレスにGoogleMapの地図を埋め込むとこのように表示されるようになります。
GoogleMapの地図を埋め込む方法
GoogleMapの地図を埋め込む手順は次の通りです。
- GoogleMapで地図を表示する
- 埋め込みコードをコピーする
- ワードプレスの表示したい場所にコードを貼り付ける
それでは、詳しく見ていきましょう。
1.GoogleMapで地図を表示する
まずは、(https://www.google.co.jp/maps/)を起動しましょう。
検索ボックスに目的地の住所や名称などを入力し、検索します。
2.埋め込みコードをコピーする
GoogleMap上に表示された「共有」をクリックします。
「地図を埋め込む」のタブをクリックしてから、「HTMLをコピー」をクリックします。
サイズ | 小 | 中 | 大 | カスタム |
---|---|---|---|---|
幅×高さ(px) | 400×300 | 600×450 | 800×600 | 自由に設定 |
埋め込みのサイズも自由に設定できるので、埋め込む場所に合わせて選択してみてください。
3.ワードプレスの表示したい場所にコードを貼り付ける
次に、ワードプレスの貼り付けたい場所にコードを貼り付けていきます。
ワードプレスの記事編集画面を開きましょう。
ブロックエディタの場合
ブロックエディタの場合は、ブロックを追加するところからウィジット内にある「カスタムHTML」を選択します。
ブロックが追加できたら、先ほどコピーしたコードを貼り付けて「プレビュー」をクリックしましょう。
クラシックエディタの場合
クラシックエディタの場合は、記事の編集画面を開いて「テキスト」タブをクリックします。
地図を埋め込みたい場所に、先ほどコピーしたコードを貼り付けて「ビジュアル」エディタに移れば地図が表示されているのが確認できます。
ワードプレスにマップを埋め込むプラグインを紹介
ワードプレスには、簡単にGoogleMapが埋め込めることが分かりました。
コードをコピーして埋め込む方法も簡単ですが、プラグインを使ってマップを埋め込むこともできます。
どんなプラグインがあるのか見ていきましょう。
Easy Google Maps
Easy Google Mapsは、地図のデザインが豊富に選べるプラグインです。
また、複数の地図を設置することができたり、サイドバーに表示することもできます。
カスタマイズが色々できるのに無料で使えるので、人気の高いプラグインです。
操作も簡単で使いやすいので、是非使ってみてください。
WP Go Maps
WP Go Mapsは、無料版と有料版があり、無料版は機能が制限されています。
マップをショートコード化できたりアイコンを自由にデザインすることもできますよ。
サイトのデザインに合わせてマップの雰囲気が変えれたりする機能も人気です。
MapPress Maps for WordPress
MapPress Maps for WordPressのプラグインは、全ての投稿や固定ページにもマップを追加できます。
全ての端末でワンクリックでGoogleMapに誘導できるので読者にとっても利用しやすいでしょう。
複数の地図を作成して1つのページに設置することも可能です。
住所を検索してそのまま地図に埋め込むだけで簡単に地図が作成できるのも便利ですよ。
ワードプレスでYahoo!地図の埋め込みもできる
よく使われるのはGoogleMapの埋め込みですが、実はYahoo!地図の埋め込みも可能です。
Yahoo!地図にアクセスして、地図を載せたい場所の住所や施設名などで検索します。
ズームなどでどのように表示されるか地図の拡大率を調整します。
「共有」をクリックします。
サイズ選択で比率を設定するか、カスタムサイズ選択で任意の大きさを設定できます。
サイズ指定したら「コピー」をクリックします。
GoogleMapと同じように、ワードプレスに埋め込みコードを貼り付けます。
これで、Yahoo!地図をワードプレスに埋め込むことができます。
ワードプレスに地図を埋め込むときの注意点
ワードプレスに地図を埋め込む方法が分かりましたが、注意しなければいけない点についても紹介しますので参考にしてみてください。
場所が違う
住所を指定して埋め込みしたものの、指定した場所とは違う地図が表示されてしまうことがあります。
その場合は、地図の位置調整を行いましょう。
GoogleMapの場合は、地図の中心に指定したい場所をクリックし、その場所の座標をクリックして共有すると座標の位置の埋め込みコードが表示されます。
そのコードを埋め込めば、ピンポイントで地図を表示させることができますよ。
サイズが違う
埋め込んだ地図のサイズが指定したサイズと違って表示されることもあります。
これは、テーマのクセによるものですが、埋め込みコードの前後に<div>のコードで囲めば解決できますよ。
まとめ
ワードプレスに地図を埋め込む方法について解説しました。
- ワードプレスのサイトに地図を埋め込むことができる
- オンラインの地図を埋め込むといつでも最新のマップを閲覧できる
- アプリに自動的に遷移するので便利
- マップを埋め込むための便利なプラグインもある
ワードプレスにGoogleMapを埋め込むのはとても簡単です。
地図を埋め込めばさまざまなメリットがあります。
また、便利なプラグインもあるので、デザインなどにこだわりを持ちたい人にもおすすめです。
是非参考にしてみてくださいね。
ホームページを今より活用して集客に繋げたい方、
WEBマーケティングを展開してきたい方はWebHEROにお任せください!
ホームページを活用して、もっと売上アップしたい…!
そう考えているあなたは、こんなお悩みをお持ちではないでしょうか?
そのお悩み、WebHEROにお任せください!
WEBマーケティングにおける重要なポジションを担っている「ホームぺージ」を
優秀なWEBマーケターの視点をいれて制作をさせていただきます!
まずは無料相談!
いつでもお気軽にご相談ください!