現在地からのルート(経路)付きのGoogleMapをHTMLに埋め込む

経路付きのGoogleMapを埋め込むテンプレート

雛形のURL

https://www.google.com/maps/dir/?api=1&destination=目的地名または住所&travelmode=移動手段の指定

移動手段の指定

  • driving:車
  • transit:公共交通機関
  • walking:徒歩
  • bicycling:自転車

解説

Web制作をしていると、GoogleマップをHTMLに埋め込むことはよくあります。
マップの埋め込みは難しくないのですが、「目的地までのルート付きのリンクを埋め込んでほしい」となると少し困りませんか?

こういうやつです↓↓(大阪城公園までのルート)

お車でお越しの場合

公共交通機関でお越しの場合

徒歩でお越しの場合

自転車でお越しの場合

ルート付きURLリンクの埋め込み方も簡単なので解説していきます。

ルート付きマップの埋め込み方

  1. 雛形のURLに「目的地名」か「住所」を記載する
  2. 移動手段を指定する場合は、移動手段を記載する

雛形のURLさえあれば、シンプルで簡単です。

最も重要な、雛形のURLを確認していきましょう。

雛形のURL

https://www.google.com/maps/dir/?api=1&destination=目的地名または住所&travelmode=移動手段の指定

上記URLの末尾に「目的地名」か、「住所」を記載します。移動手段を指定したい場合は、移動手段を指定します。
移動手段を指定しない場合は、住所以下の「&travelmode=移動手段の指定」は不要です。
指定方法を確認していきます。

移動手段の指定

  • driving:車
  • transit:公共交通機関
  • walking:徒歩
  • bicycling:自転車

飛行機でのルート作成方法はちょっとわかりませんでした。
公式ドキュメントを参考にしましたので、もっと詳しく知りたいよ!って方はそちらをご参照ください。
公式ドキュメント英語なので、翻訳したものも置いておきます。Evernoteです
複数の目的地を設定したり、他にも色々できるみたいです。

まとめ

雛形のURL

https://www.google.com/maps/dir/?api=1&destination=目的地名または住所&travelmode=移動手段の指定

移動手段の指定

  • driving:車
  • transit:公共交通機関
  • walking:徒歩
  • bicycling:自転車

サンプル

あなたの現在地から、大阪駅まで車で移動する時のURL

https://www.google.com/maps/dir/?api=1&destination=大阪駅&travelmode=driving

うまく行かない時は、「日本語をURLエンコーダで、謎の記号に変換する」

うまく行かない時は、日本語の文字列をURLエンコーダで変換してみてください。

URLエンコーダはこちら

URLエンコーダで変換した時のURL

https://www.google.com/maps/dir/?api=1&destination=%E5%A4%A7%E9%98%AA%E9%A7%85&travelmode=driving

最後に

最後まで読んで頂きありがとうございました。

マップの埋め込み方法の解説はこれで終わりです。


今回は、自分が経路付きのマップURL作成時に困ったので記事にしました。

検索すると「緯度・経度を指定する方法」などでてきましたが、「緯度・経度」の取得も面倒でしたし、取得して埋め込んでも目的地名が表示されず、使い物になりませんでした。


この記事を読んでくれた方が、ぼくと同じような経験をせず、時間をかけずにURL作成できたならとても嬉しいです。