Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
21
Help us understand the problem. What is going on with this article?
@yukishiba

Google Maps URL 「現在地からのルート」のリンクを作る

地図リンク

地域情報系のサイトでよくあるのが Google Maps へのリンク。
座標や施設名などのキーワードで簡単につくることができます。
施設の情報を表示しつつ、ユーザーは容易にルート検索を始める事ができます。

// 座標を使う場合
https://maps.google.co.jp/maps?q=${lat},${lng}&z=${zoom}
// 施設名などのキーワードを使う場合
https://maps.google.co.jp/maps?q=${keyword}&z=${zoom}

${hoge} の部分は変数です(以下同様)

例:京都駅の地図

現在地からのルート

一方、リンク先に 現在地からのルート を直接表示してほしいという依頼があったので調べてみました。
Google Maps URL を使って作る事ができます。

// 座標を使う場合
https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}
// 施設名などのキーワードを使う場合
https://www.google.com/maps/dir/?api=1&destination=${keyword}

例:現在地から京都駅へのルート

※現在地として表示される場所はGPSが有効な場合はほぼ正確ですが、PCなどGPSを使用しない場合は推定位置です。位置情報の推定方法についてはGoogle 検索 ヘルプに記事がありますのでご覧ください。

出発地から現在地へのルート

また、出発地が固定されている場合(駅からの案内など)は、以下のようになります。

// 座標を使う場合
https://www.google.com/maps/dir/?api=1&origin=${lat},${lng}&destination=${lat},${lng}
// 施設名などのキーワードを使う場合
https://www.google.com/maps/dir/?api=1&origin=${keyword}&destination=${keyword}

例:京都駅から京都タワーへのルート

参考

Google Maps APIs - Maps URLs - Overview - Forming the Directions URL
https://developers.google.com/maps/documentation/urls/guide#directions-action

21
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
21
Help us understand the problem. What is going on with this article?