【Cocoon】ルート表示したGoogleMapを記事に埋め込む方法

ブログ運営

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

Cocoonで記事を書いていて、

GoogleMapでルート表示結果を見せたいな

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

スポンサーリンク

指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む

今回やりたいことは

「ルート表示したGoogleMapを記事に埋め込む」

ということ。

地図のスクショに色を塗ってもいいですが、グニャグニャの線になってしまいがち。
そしてやっぱりGoogleMapに直接飛べた方が便利ですよね。

準備するものは

準備するもの

・ブラウザ版GoogleMap

です。

イメージ

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

デモ例では、名古屋城からセントレアへの車での最速ルートを表示するGoogleMapを埋め込みます。

手順

指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む方法です。

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

GoogleMapでルート検索

GoogleMapで表示したいルートを検索します。
「交通手段」「出発地」「目的地」をいれて検索します。

デモ例では、「名古屋城→セントレアへの車のルート」を検索、最速ルートを選択しました

記事に表示したいルートが表示されたら、[共有]ボタンをクリックします。

ルート表示の場合は、ピン押ししたときと異なり、地図の縮尺を変えても埋め込む際の地図表示には反映されません。
大体ルートの全体像がわかるよう縮尺が自動調整されます。

地図のHTMLを発行・コピー

デモ例では、表示サイズは「中」のままで、HTMLをコピーを押しました

WordPressの記事にHTMLを埋め込む

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

コピーしたHTMLを貼り付け
GoogleMapでコピーしたHTMLをカスタムHTMLに貼り付け

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

プレビューでチェック
記事で地図表示した時のプレビュー

地図表示のサイズ感に問題なければ、これで
「指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む方法」
の手順は終わりです。

スポンサーリンク

まとめ

記事の中に、指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。

デモ

動作確認のためのデモとして残しています。

デモ

名古屋城からセントレアまでの車ルート表示したGoogleMapを埋め込む

コメント