WordPressの記事にGoogleマップを埋め込む方法

【WordPress】記事にGoogleマップを埋め込む方法

WordPressにGoogleマップを埋め込む方法をまとめています。

目次

Googleマップを埋め込む

Googleマップでコードを取得

Googleマップにアクセスして、検索ボックス及びマップから目的地を指定します。

検索ボックス及びマップから目的地を指定

目的地とマーカーの位置を確認して、「共有」をクリックします。

目的地を確認して「共有」をクリック

上段タブから「地図を埋め込む」をクリックして、「HTMLコード」をコピーします。

上段タブから「地図を埋め込む」をクリック
地図のサイズピクセル
400 × 300
600 × 450
800 × 600
カスタム横幅と縦幅を指定できる

地図の縮尺を変更したい時は、マウスホイールの上下及びズームボタンで縮尺を変更してから「共有」をクリックして下さい。地図埋め込み画面で縮尺を変更してもコードには反映されません。

カスタムHTMLブロックに挿入

記事編集画面で、Googleマップを表示させたい場所に「カスタムHTML」ブロックを追加します。

カスタムHTMLブロックを追加

Googleマップでコピーした「HTMLコード」をそのまま貼り付けます。

コピーしたHTMLコードを貼り付ける

問題がなければ、下記の様なマップが表示されます。

Googleストリートビューを埋め込む

Googleマップを埋め込む方法とやる事は同じですが、ストリートビューでは選択できる場所が限られています。

Googleストリートビューでコードを取得

Googleマップにアクセスして、検索ボックス及びマップから目的地を指定します。

検索ボックス及びマップから目的地を指定

画面右下に表示されている「ストリートビューを表示」アイコンをクリックします。

ストリートビューを表示アイコンをクリック

青い丸と線が表示されているエリアから、ストリートビューで表示したい場所を選択します。

ストリートビューで表示可能な場所

ストリートビューに切り替わったら、左上のメニューから「画像を共有または埋め込む」をクリックします。

メニューから「画像を共有または埋め込む」をクリック

上段タブから「地図を埋め込む」をクリックして、「HTMLコード」をコピーします。

ストリートビューのコードをコピー
地図のサイズピクセル
400 × 300
600 × 450
800 × 600
カスタム横幅と縦幅を指定できる

写真のズームを変更したい時は、マウスホイールの上下及びズームボタンで変更してから「画像を共有または埋め込む」をクリックして下さい。地図埋め込み画面でズームを変更してもコードには反映されません。

カスタムHTMLブロックに挿入

記事編集画面で、Googleストリートビューを表示させたい場所に「カスタムHTML」ブロックを追加します。

カスタムHTMLブロックを追加

Googleストリートビューでコピーした「HTMLコード」をそのまま貼り付けます。

コピーしたストリートビューのHTMLコードを貼り付ける

問題がなければ、下記の様なストリートビューが表示されます。

最後に

Googleマップは無料かつ情報も常に更新されているので、ブログで目的地を伝えたい時に利用すると便利です。

ただ、個人が申請して追加した様な場所は、削除されることも多いので(座標が指定されているので地図は表示されますが目的地は表示されません)、目的地を指定する時は注意して下さい。

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次