Google Maps でロングタップのイベントを発生させるには

2016.08.23

みなさん、こんにちは！

今回は Google Maps 上でスマホやiPadなどのタブレットでロングタップに対応する方法をご紹介します。

Google Maps に右クリックのイベント[rightclick]を実装したサイトをiPadで見ると、スマホやiPadではもちろん右クリックなんてありませんからイベントを発生させられませんね。

Google Maps では、スマホやタブレット用のイベントは用意されて。。。いません。

基本的なイベントについては下の Google Maps APIs のサイトにあり、スマホやタブレットのタップはイベントの[click]として対応します。

右クリックのイベントはどうかというと、残念ながらスマホやタブレットだからといって勝手にロングタップに変換してくれるている訳ではありません。

Google Maps APIs イベントについて

ロングタップを右クリックと同じ動作にさせるイベントを[mousedown],[mouseup]のイベントを使って作っていきます。

では、早速コードを見ていきましょう。


function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 35.7, lng: 139.7}, 
  });

  addListener(map);
}

function addListener(map){
    //右クリックの処理
    google.maps.event.addListener(map, 'rightclick', function (event) {
        alert("右クリックです");
    });
    
    //以下、ロングタップの処理
    google.maps.event.addListener(map, 'mousedown', function (event) {
       start = new Date().getTime();
    });

    google.maps.event.addListener(map, 'mouseup', function (event) {
        if (start) {
            end = new Date().getTime();
            longpress = (end - start < 500) ? false : true;
            
            if(longpress){
                alert("ロングタップです。");
            }
        }
    });
}

このままだと、パソコンから操作した時の長押しクリックにも反応してしまうので、userAgentをチェックしてスマホやタブレットの場合だけマウスダウンのstartが走るようにしてください。

今までパソコンからの操作のみに対応していたものサービスをiPadでも使いたいときに提案する操作方法の1つとして検討してみてはいかがでしょうか。

Full Screen

いかがでしたか？
マルティスープでは、Google Maps APIs を使った開発を一緒に携わってくれる仲間を募集しています！
ご興味のある方は以下よりお問い合わせください。

マルティスープ株式会社　採用担当
TEL:03-3518-9013
Mail: info[@]multisoup.co.jp