【Cocoon】GoogleMap上の好きなところにピン押しして記事に埋め込む方法

ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「記事の中にGoogleMap上の任意の場所にピン押しして埋め込たい」というもの。

Cocoonで記事を書いていて、

と思ってやり方を調べたので、実施手順についてまとめました。
※PCでの作業想定です。

GoogleMap上の登録スポットを記事に埋め込む方法

今回やりたいことは

「記事の中にGoogleMap上の好きな場所にピン押しして埋め込む」

ということ。

GoogleMapにはスポット登録されていないけど、地図上に場所をさし示したい！というときありますよね。

　・GoogleMapには登録されていない場所にピン押ししたい
　・記事から直接GoogleMapを開けるようにしたい
ときの方法です。

場所を伝えようとしてもGoogleMap上に登録がない場所だと、記事を見ている人に探してもらうのは至難の業ですからね。GooleMapで開けると便利です。

準備するものです。

実施方法です。

イメージ

今回やりたいことのイメージはこんな感じ。

今回のデモ例では、上の画像↑↑のように、「名古屋城のお堀の橋前にピン押ししたGoogle Map」を埋め込みます。

手順

GoogleMap上の好きなところにピン押ししたGoogleMapを記事に埋め込む手順です。

手順は、
　GoogleMapで表示したい場所を探す→場所の緯度経度を表示・検索→地図のHTMLを発行・コピー→WordPressの記事に埋め込む
という流れです。

GoogleMapで表示したい場所を探して座標をコピー

まずWebブラウザでGoogleMapを開きます。
GoogleMapが開いたら、GoogleMapで表示したい場所を探して、マップ上で右クリックします。
右クリックしたらメニューが出てくるので、その場所の座標をコピーします。

場所の緯度経度を表示・検索

座標がコピーできたら、GoogleMapの検索画面に貼り付けます。
貼り付けて[Enter]キーを押すと、先ほど右クリックした場所にピン押しがされ、場所の情報が表示されるので、[共有]ボタンをクリックします。

地図のHTMLを発行してコピー

[共有]を開いたら、「地図を埋め込む」を押します。
地図のプレビューが表示されるので、表示縮尺と地図の埋め込みサイズを確認して、[HTMLをコピー]を押します。
※このプレビュー画面で地図の縮尺を変更しても、実際に埋め込まれる地図には反映されません。

WordPressの記事にHTMLを埋め込む

WordPressの記事の編集画面を開きます。
記事のGoogleMapを埋め込みたい場所に移動して、ブロックメニューで「カスタムHTML」を選びます。

カスタムHTMLの編集画面が開いたら、GoogleMapでコピーしたHTMLを貼り付けます。

HTMLを貼り付けたら、[プレビュー]ボタンを押します。
記事に表示したときのプレビューが出るので、チェックします。

表示の縮尺やサイズ感に問題なければ、これで「指定の場所にピン押ししたGoogleMapを記事に埋め込む方法」の手順は終わりです。

まとめ

GoogleMapの好きなところにピン押しして、記事の中に埋め込む方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。