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

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

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

2018.06.28

新プランの Places API を調べてみました

みなさん、こんにちは。

新プラン Google Maps Platform の中で、 Places API の価格体系は、非常に細かく分類・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

2017.03.11

GoogleマップにGeoJSONで図形を描画する

みなさん、こんにちは!

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画・・・

続きを読む

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