Tweet

Pocket

スマートフォンサイトからリンクで地図アプリ（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?」に書き換わる処理です。

参考サイト

• スマートフォンサイトのHTMLコーディングメモ12個