【HP制作(スマホ)】地図リンクからGoogle Mapを起動する
スマートフォンサイトからリンクで地図アプリ(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?」に書き換わる処理です。
コメントを残す