スマホの地図アプリをウェブページから開く

JavaScript

fujihara

2015.06.09

どうもfujiharaです

本日はウェブページ内リンクからスマホの地図アプリを開く方法をご紹介します。
アプリケーションを開くと現在地から目的地住所までのルートが表示され、ナビゲーションスタートを押すとナビが始まります。

流れ

以下の流れで設定をしていきます。
①まず、住所情報がGoogle Map Api で取得できるか確認。
②住所情報が取得できたら住所をリンクタグで囲む。

①については代わらない住所であれば省いてしまってもかまいません。

実装

HTML


<p>株式会社シーブレイン</p>
<span class="address">横浜市中区尾上町5-77-2馬車道ウエストビル8F</span><br></span>
<p>馬車道駅(地下鉄)</p>
<span class="address">神奈川県横浜市中区本町五丁目49</span>

JavaScript


$(document).ready(function() {
  $('.address').each(function() {
    var $target = $(this);
    //問い合わせ住所をencode
    var address = encodeURIComponent($(this).text());
    //Google API Key
    var googleApiKey = "AIzaSyDn6zX0zg2FU-EBve4AMY2-Vz2UuQG3TuM";
    //Google Map用リンク
    var apiFooterUrl = "://maps.googleapis.com/maps/api/geocode/json?";
    //住所存在確認URL
    var checkUrl = "https" + apiFooterUrl + "address=";
    //リンク用hrefプロトコル(iPhone用)
    var openAppUrl = 'maps';
    //リンク用href 生成
    openAppUrl += apiFooterUrl + "saddr=Current%20Location&daddr=";
    //リンク用hrefプロトコル(Android用)
    if (window.navigator.userAgent.toLowerCase().indexOf('android') !== -1) {
      openAppUrl = 'http://maps.google.com/maps?saddr=Current%20Location&daddr=';
    }
    $.ajax({
      //問い合わせようURL
      'url':checkUrl+address+'&key='+googleApiKey
    }).done(function(data) {
      //住所が存在する場合のみ
      if (data.status === "OK") {
        //住所タグをアンカータグで囲む
        $target.wrap("<a href='"+openAppUrl + $target.text() + "'></a>");
      }
    });
  });
});

説明(JavaScript)

1．まず問い合わせする用の住所をURL用に変換します。
2．問い合わせはGoogle Geo Coding を使用しますので、そのためのAPIキーを準備します。(使用するリファラーが決まっていますので、このキーは各自で用意します)
Google Geocoding API
3．変数 apiFooterUrl は Geo Coding 問い合わせ用とアプリケーションを開く際のURLの等しい部分を定義しています。
4．変数 openAppUrl はアプリケーションを開くため用のURLを定義しています。注意するのは Android 用と iPhone 用で若干設定するhref が異なります。
ちなみにこれはスマホ用ですので、PCで開いても何も動きません。
5．そして Ajax で住所確認を行います。
6. 住所確認がOKであれば、住所をリンクタグで囲んであげます。
iPhoneの場合href は http://maps.googleapis.com/maps/api/geocode/json?saddr=Current%20Location&daddr=住所としてあげることで開いたアプリケーションでナビゲーションがスタートする状態になっています！

作成したものをアップしましたので、是非スマホでご確認下さい！グーグルマップアプリケーションを開く！