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

WordPress・PC

 

 

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

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

 

地図をキャプチャーして貼り付けるのではなく、ウェブサイト内に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コードをコピペして地図を表示させた方が、余計なプラグインをインストールしなくて済むのでよいと思います。

 

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

 

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

 

それでは。

コメント

タイトルとURLをコピーしました