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.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2018.08.02

Directions と Directions Advanced の違い

みなさん、こんにちは。

7月16日より、Google Maps APIs は Google Maps Platform と名前を変え、新しい価・・・

続きを読む

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

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

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

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