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

「関東一の祇園・熊谷うちわ祭り」の山車・屋台位置情報サイト公開!

みんさん、こんにちは!

暑い夏をいかがお過ごしですか?今回は、前回記事の山笠に引き続き、夏祭りネタにです^^

 ・・・

続きを読む

2016.07.24

スタイルマップを使用して地図の雰囲気を変えてみる

みんさん、こんにちは!

いつも見慣れたグーグルマップだけど、利用するためには地図の色が雰囲気に合わない事ってありますよね? 実はグーグルマップ・・・

続きを読む

2017.12.17

マーカーにスタイルを適用してラベルを描画する

みなさん、こんにちは。

今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描画方・・・

続きを読む

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

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

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

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

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