deezus blog

.Net Core、Typescriptを中心に技術的ノウハウを公開しています

google mapへのリンクURLで経路を表示する

はじめに

google mapはURLにパラメータを付与することで、ある地点からある地点までの経路を表示させることができます

指定例

https://www.google.com/maps/dir/?api=1&origin=[from]&destination=[to]  

[from]と[to]に様々なものが指定できます

地点名で指定

大阪駅から難波駅への経路を表示します
https://www.google.com/maps/dir/?api=1&origin=大阪駅&destination=難波駅

緯度経度で指定

同様に大阪駅から難波駅への経路ですが、緯度経度で指定しています
緯度、経度の順番でカンマ区切りで指定します

https://www.google.com/maps/dir/?api=1&origin=34.7024852,135.4940424&destination=34.6667364,135.4979892

行き方を指定する

travelmodeを指定すれば行き方を指定できます

driving 自動車 https://www.google.com/maps/dir/?api=1&origin=大阪駅&destination=難波駅&travelmode=driving
walking 徒歩 https://www.google.com/maps/dir/?api=1&origin=大阪駅&destination=難波駅&travelmode=walking
transit 交通機関 https://www.google.com/maps/dir/?api=1&origin=大阪駅&destination=難波駅&travelmode=transit

おわりに

細かく色々なことをやろうと思うと、APIを使用する必要がありますが、例えば最寄駅からお店までの経路を表示する場合ななど手軽にできますね