しんぺー 
経路付きのGoogleMapを埋め込むテンプレート
雛形のURL
https://www.google.com/maps/dir/?api=1&destination=目的地名または住所&travelmode=移動手段の指定移動手段の指定
- driving：車
- transit：公共交通機関
- walking：徒歩
- bicycling：自転車
解説
Web制作をしていると、GoogleマップをHTMLに埋め込むことはよくあります。
マップの埋め込みは難しくないのですが、「目的地までのルート付きのリンクを埋め込んでほしい」となると少し困りませんか？
こういうやつです↓↓（大阪城公園までのルート）
ルート付きURLリンクの埋め込み方も簡単なので解説していきます。
ルート付きマップの埋め込み方
- 雛形のURLに「目的地名」か「住所」を記載する
- 移動手段を指定する場合は、移動手段を記載する
雛形の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
https://www.google.com/maps/dir/?api=1&destination=%E5%A4%A7%E9%98%AA%E9%A7%85&travelmode=driving
最後に
最後まで読んで頂きありがとうございました。
マップの埋め込み方法の解説はこれで終わりです。
今回は、自分が経路付きのマップURL作成時に困ったので記事にしました。
検索すると「緯度・経度を指定する方法」などでてきましたが、「緯度・経度」の取得も面倒でしたし、取得して埋め込んでも目的地名が表示されず、使い物になりませんでした。
この記事を読んでくれた方が、ぼくと同じような経験をせず、時間をかけずにURL作成できたならとても嬉しいです。
