スマホサイトのGoogle Mapに「アプリで開く」ボタンを追加する

なんかスマホのWEB版GoogleMapは使いづらいなってことで。

iPhoneは「マップ」App、その他は「Google Maps」を開くように

こちらのサイトにありました。

Some Designers
iPhoneならiOS標準の地図アプリ、AndroidならGoogleマップアプリを起動して経路を表示する

上記のサイトだと

// iOS以外はGoogleマップアプリ
$("#js-access-map a").attr("href", "http://maps.google.com/maps?saddr=&daddr=35.710432,139.80937199999994&z=16");

とあったがもう少し調べてみると、アプリで開くにはhttpスキームをcomgooglemapsに変更すればいいとのこと。

A Memorandum
iOS版のGoogle Mapsで地図を開きたいなら

Google Map上にボタンを追加

アプリで開く方法はわかったので、これをGoogle Map上にボタンとして表示する。
Google Mapにボタンを追加する方法は本家から。カスタムコントロールというようで。

Google Maps API
カスタム コントロール

これらの情報を統合して

こんな感じでしょうか。

// スマホ（iPhone / Android）判定
let os = '';
const ua = navigator.userAgent;

if(ua.indexOf('iPhone') >= 0){
    os = 'iPhone';
}
else if(ua.indexOf('Android') >= 0){
    os = 'Android';
}

// マップの表示部分については省略
let map;

let lat = （緯度）;
let lng = （経度）;
let zoom = 16;

if(os !== ''){
    // アプリで開くボタンを追加
    let btnControlDiv = document.createElement('div');
    let btnControl = new createAppOpenButton(btnControlDiv, zoom, lat, lng, os);

    btnControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(btnControlDiv);
}

function createAppOpenButton(controlDiv, zoom, lat, lng, os){
    let controlUI = document.createElement('div');

    /**
     * ボタンのスタイリング
     * この辺はほぼGoogleのサンプルのまま
     */

    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '2px solid #fff';
    controlUI.style.borderRadius = '3px';
    controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    controlUI.style.cursor = 'pointer';
    controlUI.style.marginLeft = '5px';
    controlUI.style.textAlign = 'center';
    controlUI.title = '地図アプリで開く';
    controlDiv.appendChild(controlUI);

    let controlText = document.createElement('div');
    controlText.style.color = 'rgb(25,25,25)';
    controlText.style.fontSize = '13px';
    controlText.style.lineHeight = '26px';
    controlText.style.paddingLeft = '5px';
    controlText.style.paddingRight = '5px';
    controlText.innerHTML = '地図アプリで開く';
    controlUI.appendChild(controlText);

    /**
     * クリック時の挙動
     * iOSは「マップ」、その他は「Google Maps」を開くように
     * 
     * 「saddr」パラメータは基準とする場所の経度／緯度。何も指定しないことで現在地からの距離を測定してくれるらしい。
     * 「daddr」パラメータは目的地の経度／緯度。
     */

    controlUI.addEventListener('click', function() {
        let scheme = os === 'iPhone' ? 'http' : 'comgooglemaps';
        let type = os === 'iPhone' ? 'apple' : 'google';
        location.href = `${scheme}://maps.${type}.com/maps?saddr=&daddr=${lat},${lng}&z=${zoom}`;
    });
};