Googleマップを投稿や固定ページに表示させる方法を紹介します。簡単な手順でページ内に地図を挿入できます。ルート案内付きの地図も埋め込むことができます。
Googleマップをサイトに埋め込む方法
Googleが提供する無料の地図サービス「Googleマップ」は、地図を簡単に共有できる仕組みを備えています。その一つが、コードを貼り付けるだけでサイトに地図を表示できる、「埋め込み」機能です。
Googleマップを埋め込む手順
GoogleマップをWordPressのサイトに埋め込むために必要な作業は、
- 目的の地図を表示させる
- 埋め込みコードをコピーする
- 記事編集画面で貼り付ける
と、とても簡単です。順に見ていきましょう。
Googleマップを埋め込む手順①
目的の地図を表示させる
Googleマップにアクセスして、目的地を検索します。下のように候補が表示された場合は、その場所をクリックします。
目的の地図を表示できました。
Googleマップを埋め込む手順②
埋め込みコードをコピーする
地図の左側にある「共有」をクリックします。
「地図を埋め込む」をクリックします。
画面左上の▼をクリックすると、地図のサイズを選択できます。
それぞれのサイズを選択したときの地図の大きさは、次の通りです。
| サイズ | 幅 | 高さ |
|---|---|---|
| 小 | 400 | 300 |
| 中 | 650 | 450 |
| 大 | 800 | 600 |
| カスタムサイズ | 任意 | 任意 |
サイズを選択できたら、埋め込みコードをコピーします。
Googleマップを埋め込む手順③
WordPressの記事編集画面で貼り付ける
ここからは、WordPress管理画面での作業です。地図を表示したい投稿(あるいは固定ページ)の編集画面を開き、テキストモードに切り替えます。
先ほどコピーした埋め込みコードを、本文入力欄に貼り付けます。きちんと表示されるかどうか確認するため、プレビューをクリックしてみましょう。
Googleマップをサイトに表示することができました。
ここまで、Googleマップの標準機能を利用した地図の埋め込み方法を紹介しました。しかし、この方法には、
- 地図をいくつも埋め込むには手間がかかる
- 大きい地図が画面に入りきらない
- 地図が画面スクロールの妨げになる
などの欠点があります。これらを回避するには、Simple Map（Googleマップ埋め込みプラグイン）が便利です。
道順案内付きの地図を埋め込む方法
Googleマップには、出発地から目的地までの道順(ルート)を表示する機能があります。このルート案内を表示した地図を、サイトに埋め込むことができます。
道順案内付きの地図を埋め込む手順①
出発地と目的地を入力
検索フォーム右側の「ルート」ボタンをクリックします。
例として、[浅草寺]から[東京スカイツリー]へ[徒歩]で行くルートを表示させてみます。
道順案内付きの地図を埋め込む手順②
埋め込みコードをコピー
画面左上の「メニュー」ボタンをクリックします。
「地図を共有または埋め込む」をクリックします。
ここから先は、[Googleマップを埋め込む手順②および③]で紹介した方法と同じです。
