【Cocoon】記事の中にGoogleMapの登録スポットを埋め込む方法

ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「記事の中にGoogleMapのスポットを埋め込たい」というもの。

Cocoonで記事を書いていて、

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

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

今回やりたいことは

「GoogleMap上のスポットにピン押ししたGoogleMapを記事に埋め込む」

ということ。

地図を載せるなら、GoogleMapのスクリーンショット画像を掲載するのもありですが、

• 記事から直接GoogleMapを開けるようにしたい
• GoogleMapのお店や施設の情報をすぐに見れるようにしたい

ときに、便利かなと思います。
わざわざGoogleMap開いて、個別に検索するのもめんどくさいですしね。

準備するものです。

実施方法です。

イメージ

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

今回のデモ例では、上の画像↑↑のように、セントレアにピン押ししたGoogleMapを埋め込みます。

手順

GoogleMap上のスポットにピン押ししたGoogleMapを記事に埋め込む手順です。

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

GoogleMapで場所を検索

GoogleMapで表示したい場所を検索します。
記事に表示したい場所が表示されたら、[共有]ボタンをクリックします。

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

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

WordPressの記事にHTMLを埋め込む

WordPressの記事の編集画面を開きます。

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

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

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

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

まとめ

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