MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.08.23

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

img

みなさん、こんにちは!

今回は 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

【関連記事】こんな記事も読まれています

2017.07.09

Geocoding API を使って郵便番号から住所を入力するフォーム

みなさん、こんにちは。

よく入力フォームで住所を入力するとき、郵便番号から自動で住所を入力する方法がありますね。今回は、Google Ma・・・

続きを読む

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

2017.03.17

時差計算ができるGoogle Maps Time Zone API の利用方法を・・・

みなさん、こんにちは。

 

Google Maps API で最後まで紹介できていなかった「続きを読む

 - Google Maps APIs, Google Maps JavaScript API, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)