Touch events for google maps on mobile

mohsinali1317

In my app I am using google maps and I am creating locations on the maps once the user right clicks. I have this event doing the trick for me

google.maps.event.addListener(map, 'rightclick', function (e) {
    if (checkDistance(e.latLng)) {
        if (viewModel.haveRolesToDoStuffOnProjectLevel()) {
            geocoder.geocode({ location: e.latLng }, function (result) {
                if (result.length > 0) {
                    var data = {
                        name: result[0].formatted_address.split(",")[0],
                        location: e.latLng,
                        address: result[0].formatted_address
                    }
                    if (viewModel.oldLocation()) {
                        moveLocationCreate(data);
                    } else {
                        startLocationCreate(data);
                    }
                }
            });
        }
    }
});

Everything is working fine until I open the app in mobile. On mobile the rightclick event won't fire. I have searched to find a way to have something like long click on mobile but it is not working. Can anyone help me finding a solution for this?

kaho

if you try this google maps event demo site on your phone/tablet, you would realize nothing happen even when you do a long click. It just means Google Maps support no tablet events.

But with jQuery, you can detect a long click, or other "mobile only" events. However, jQuery has no knowledge of the maps and, therefore, do tell you where you clicked on.

So one solution to that might be to use both, the Google Maps Click event, and the jQuery tabhold event.

First, let tabhold set a flag, to indicate that this click function is from tabhold; then on the onclick function, check if this current click event is from tabhold, if so, perform the action.

I have a quick [demo on jsfiddle][4], I just copied and pasted some code so it looks kind of ugly. But hopefully it helps.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Several threads for touch wrapper and Google Maps fragment

분류에서Dev

Google Maps Mobile SDK for Business와 Google Maps Android API

분류에서Dev

Simulate Long press by Touch events

분류에서Dev

Google Maps stuck on top-left corner - solution for Desktop doesn't work for mobile design

분류에서Dev

Use Bootstrap tooltips only if touch events are supported?

분류에서Dev

Selectfield stuck in Sencha Touch & events not firing on selection

분류에서Dev

Custom TouchDevice triggers Touch events at incorrect position

분류에서Dev

How to use Whatsapp mobile application on Ubuntu Touch?

분류에서Dev

Calendar not showing Google events

분류에서Dev

Hover on FusionTablesLayer in google maps

분류에서Dev

Render google maps with backbonejs

분류에서Dev

Overlay DIV on Google Maps

분류에서Dev

Limitation Google maps

분류에서Dev

Google Maps mangling KML

분류에서Dev

Remove google maps controls

분류에서Dev

Google Maps mangling KML

분류에서Dev

Google Maps REST API

분류에서Dev

Google Maps Directions API

분류에서Dev

Google Maps Autocompletion API

분류에서Dev

Google Maps multiple maps displayed instead of one

분류에서Dev

Not display the list view on mobile app developed by sencha touch2

분류에서Dev

angular-google-maps, access to regular google maps API

분류에서Dev

Blazor : Google Maps JS API

분류에서Dev

Google Maps MarkerCluster 및 Spiderfier

분류에서Dev

Google Maps not working using jQuery

분류에서Dev

c# google maps coordinates

분류에서Dev

Google Maps APIv2

분류에서Dev

Disable Google Maps zoom amount

분류에서Dev

Google maps on windows phone 8