ブログを運営する中で調べたこと・やってみたことシリーズ
今回は「記事の中にルート表示したGoogleMapを埋め込たい」というもの。
Cocoonで記事を書いていて、
GoogleMapでルート表示結果を見せたいな
と思ってやり方を調べたので、実施手順についてまとめました。
※PCでの作業想定です。
指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む
今回やりたいことは
「ルート表示したGoogleMapを記事に埋め込む」
ということ。
地図のスクショに色を塗ってもいいですが、グニャグニャの線になってしまいがち。
そしてやっぱりGoogleMapに直接飛べた方が便利ですよね。
準備するものは
・ブラウザ版GoogleMap
です。
イメージ
今回やりたいことのイメージはこんな感じ。
デモ例では、名古屋城からセントレアへの車での最速ルートを表示するGoogleMapを埋め込みます。
手順
指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む方法です。
手順は、
GoogleMapでルート検索→地図のHTMLを発行→WordPressの記事に埋め込む
という流れです。
GoogleMapでルート検索
GoogleMapで表示したいルートを検索します。
「交通手段」「出発地」「目的地」をいれて検索します。
記事に表示したいルートが表示されたら、[共有]ボタンをクリックします。
大体ルートの全体像がわかるよう縮尺が自動調整されます。
地図のHTMLを発行・コピー
WordPressの記事にHTMLを埋め込む
WordPressの記事の編集画面を開きます。
記事のGoogleMapを埋め込みたい場所に移動して、ブロックメニューで「カスタムHTML」を選びます。
カスタムHTMLの編集画面が開いたら、GoogleMapでコピーしたHTMLを貼り付けます。
HTMLを貼り付けたら、[プレビュー]ボタンを押します。
記事に表示したときのプレビューが出るので、チェックします。
地図表示のサイズ感に問題なければ、これで
「指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む方法」
の手順は終わりです。
まとめ
記事の中に、指定の場所から場所への移動ルートを表示したGoogleMapを埋め込む方法についてまとめました。
動作については、以下のデモの部分でもお試しいただけます。
動作確認のためのデモとして残しています。
コメント