Googleの地図をWordPressサイトに埋め込む 簡単な2つの方法

ホームページやブログで、お店や公園などを紹介する際に、地図があると読者にとって分かりやすいですよね。

言葉だけで説明されるより、地図を見れば一発で分かります。

地図をキャプチャーして貼り付けるのではなく、ウェブサイト内にgoogleの地図そのものを埋め込みますので、地図を移動させたり拡大させたりできるとても便利な機能です。

今回は、直接HTMLコードを入力(コピペ)して埋め込む方法、プラグインを使って埋め込む方法の2つの方法についてご紹介します。

スポンサーリンク

1.HTMLコード入力で埋め込む方法

なんか難しそうな感じがしますが、コピペ(コードをコピーして貼り付けるだけ)で簡単にできますので、是非覚えておきたいところです。

1-1.Google マップを開く

Googleマップにアクセスし、左上の検索窓で目的地を入力して検索します。

GoogleMap目的地検索

1-2.ピン(マーカー)表示の確認

目的地がピン表示されたか確認してください。下の図ではスカイツリーのところにピン表示(赤い枠で囲った箇所)されていますね。

ピン表示の確認

1-3.HTMLコードの取得

上の図でメニューをクリックすると、メニュー一覧が表示されますので、その中から「地図を共有または埋め込む」をクリックします。

地図を共有または埋め込む

下の図のように、「地図を埋め込む」タブをクリックし、地図の大きさを選択します。

大中小を選択すると、地図の大きさが変化しますので、その大きさに合わせたHTMLコードをコピー(Ctrl+C)します。

カスタムサイズの場合は、自分のサイトに合わせてサイズを入力してください。

HTMLコードのコピー

カスタムサイズ

1-3.HTMLコードの貼り付け

WordPressの場合は、テキストエディタにして、コピーしたHTMLコードを貼り付ければOKです。

テキストエディタ

プレビューで確認してみましょう。

プレビュー確認

うまく表示されていますね。

ついでにスマホでも確認してみましょう。

地図は自動的にスマホサイズに最適化されます。

地図を移動したり拡大したりする場合は、指2本を使って動かします。指1本では操作できませんのでご注意を。

スマホ確認

2.プラグインを使って埋め込む方法

MapPress Easy Google Maps」というプラグインをご紹介します。

2-1.インストール

WordPressの管理画面の[プラグイン]-[新規追加]をクリックし、「MapPress」で検索します。

「今すぐインストール」をクリックし、有効化をしてください。

2-2.設定

WordPressの管理画面の[MapPress]をクリックします。

下の図のように、[Google API Key]を入力してください。

Google API Keyの取得方法はこちらをご覧ください。

APIKeyの入力

マップサイズはレスポンシブルに対応できるよう、横幅を%表記に変更しておくとよいと思います。今回は「425」から「100%」に変更してみました。

最後に[変更を保存]をクリックしてください。

サイズの変更

2-3.地図の検索・保存・挿入

投稿ページの下にMapPressがあります。

[新規マップ]をクリックしてください。

MapPress

マップタイトルに任意の名称を入力します。(①)

[POIを追加]の欄に目的地の住所あるいは名称を入力(②)して、検索ボタン(③)を押してください。

地図が表示されたら、[保存]をクリックしてください。(④)

設定

下の図のように、スカイツリーのカテゴリーが追加されました。

ここで、[記事へ挿入]をクリックすると、テキストエディタにコードが追加されます。

記事へ挿入

これで地図の挿入は完了です。

プレビューで確認してみましょう。

プレビューで確認

うまく表示されていますね。

必ずスマホでも確認してみましょう。

地図は先ほど横幅を%(100%)で設定しましたので、スマホサイズに最適化されます。

スマホで確認

ちゃんとスマホサイズで表示されていますね。

まとめ

それほど地図を挿入する場面がなければ、直接HTMLコードをコピペして地図を表示させた方が、余計なプラグインをインストールしなくて済むのでよいと思います。

結構地図を多めに載せる場合には、プラグインを使った方が便利だと思います。

自分の環境に合わせて使いやすい方を試してみてください。

それでは。