スマホで現在地から目的地までのルートをだす方法

ホームページ制作を行う時、アクセスマップを表示する方法はいくつかあります。また、QRコードを読み込ませて現在地から目的地までのルートを表示させる方法も以前紹介いたしました。

本日はホームページの中に現在地から目的地までのルートを表示させるリンクを貼る方法をご紹介いたします。

どういう仕組み？

リンクをクリックorタップするとPC及びGoogleMapアプリがインストールされていないスマホの場合はブラウザでGoogleMapのページが開き、アプリがインストールされているスマホの場合はアプリが立ち上がります。

リンクの書き方

[html]
http://maps.google.com/maps?saddr=出発地&daddr=目的地&dirflg=r
[/html]

出発地の部分にはその場所の名前や住所、座標(緯度,経度)を入力することで設定できます。日本語で”現在地”と入力すると、今いる地点の緯度,経度がGPSで自動入力されます。PCの場合でもChromeなどで現在地の情報を提供すれば表示できます。ただスマホの方がスムーズでしょうね。

目的地の部分には出発地同様、名前住所座標を入力することで設定できます。

dirflg=rの最後の文字「r」は、電車(railway)のことで、目的地まで電車で行く場合のルートを表示します。現在時刻から最寄駅の電車発車時刻なども表示されます。そのrをwにすると徒歩での場合、dにすると車で目的地に向かう場合の道筋を教えてくれます。

具体例

ヤフオクドームへ向かう場合のいろんなサンプルを作ってみました。

現在地からヤフオクドームまで車で向かう

[html]
http://maps.google.com/maps?saddr=現在地&daddr=ヤフオクドーム&dirflg=d
[/html]

ここをクリック→現在地からヤフオクドームまで車で向かう

現在地からヤフオクドームまで電車で向かう

[html]
http://maps.google.com/maps?saddr=現在地&daddr=ヤフオクドーム&dirflg=r
[/html]

ここをクリック→現在地からヤフオクドームまで車で向かう

ベストアメニティスタジアムからヤフオクドームまで車で向かう

[html]
http://maps.google.com/maps?saddr=ベストアメニティスタジアム&daddr=ヤフオクドーム&dirflg=d
[/html]

ここをクリック→ベストアメニティスタジアムからヤフオクドームまで車で向かう

現在地からはっきりしない場所まで車で向かう

ここでは北山ダムという場所の近くで、目的地の名前がはっきりしない場所に行ってみます。

Googlemapを開いてその目的地の場所で右クリック→この場所についてをクリックします。

すると画面下にこういう表示が出ます。

ここの33で始まる数字の部分が緯度経度になりますのでコピーしてください。

[html]
http://maps.google.com/maps?saddr=現在地&daddr=33.437477, 130.253220&dirflg=d
[/html]

ここをクリック→現在地からはっきりしない場所まで車で向かう

こんな感じです。

ホームページ制作に携わる方はもちろん、CMSなどで記事を更新される一般の方も、イベントやお店の場所へのルートを簡単に作ることができますね！

最後までお読みいただきありがとうございます。