さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HP制作(スマホ)】地図リンクからGoogle Mapを起動する

Pocket
LINEで送る

スマートフォンサイトからリンクで地図アプリ(Google Map)を起動させる方法です。

<a href="https://maps.google.com/maps?q=クエリ">MAP</a>

クエリの記述方法

1)名称(例:q=横浜ランドマークタワー)
MAPアプリでキーワード検索した時と同じ。
類似の名称の場所があれば、当然複数の場所にピンが落ちる。
Google Mapに認識されていない名称だと、not foundになる。

2)住所(例:q=神奈川県横浜市西区みなとみらい2−2−1)
当該住所地にピンが落ち、ピンの上に住所が表示される。

3)住所+名称(例:q=神奈川県横浜市西区みなとみらい2−2−1+横浜ランドマークタワー)
当該住所地にピンが落ち、ピンの上に名称が表示される。
ただし、名称もあくまでクエリとして認識されるため、名称がGoogle Mapに認識されていないと、住所が有効であってもNot Foundになる。

4)緯度経度(例:q=35.455181, 139.631364)
当該座標地点にピンが落ち、該当の住所があればピンの上に住所が表示される。
なお、自分の住所の緯度・経度を知りたい時は、https://www.geocoding.jp/が便利。

5)緯度経度+名称(例:q=35.455181, 139.631364+横浜ランドマークタワー)
iPhoneの場合は、当該座標地点にピンが落ち、ピンの上に名称が表示される。
これも3と同様、名称がGoogle Mapに認識されていないとNot Foundになる。
Androidの場合は、+以降が無視される模様。4と同じ挙動を示す。
特別な事情がない限り、3を推奨。

※iOS6より上記のリンクコードだけでは起動しないようなので、下記のJSを利用。

JSによる方法

HTML

<a href="maps:q=神奈川県横浜市西区みなとみらい2−2−1" class="openmap">場所を表示</a>
<a href="maps:saddr=みなとみらい駅&daddr=神奈川県横浜市西区みなとみらい2−2−1" class="openmap">経路を表示</a>

JavaScript

if(navigator.userAgent.indexOf('Android') > 0) {
    $(".openmap").each(function(){
       url = $(this).attr("href").replace("maps:","https://maps.google.com?");
       $(this).attr("href",url);
    });
}

HTMLの「map:」の部分が、Androidの場合のみ「https://maps.google.com?」に書き換わる処理です。

参考サイト

カテゴリー:HP制作, スマホ

コメントを残す

コメント内容