5

google maps api does not support touch events

but now i need to do some thing on the map and marker, such as long tap the map, tap the marker,drag the marker.

what i wanna do is the same as the google maps client for iOS

duncan
  • 31,401
  • 13
  • 78
  • 99
simon xu
  • 954
  • 2
  • 10
  • 19

2 Answers2

18

I implemented touch events the same way as shreedhar, but using the "mousedown" event. I've found that "click" isn't triggered on mobile devices when using the Google Maps API in a webview (i.e. PhoneGap), but the "mousedown" event is triggered by a tap on mobile or a click on the web.

window.infowindow = new google.maps.InfoWindow({
   content: 'content'
});

google.maps.event.addListener(marker, 'mousedown', function(){
   window.infowindow.open(marker.get('map'), marker);
});

Also, be sure to only define one infowindow variable on your page, and re-use it for all of your markers, hence why I defined infowindow as a "global" variable window.infowindow.

Brad Griffith
  • 451
  • 3
  • 5
1

In this link you can get many examples. https://google-developers.appspot.com/maps/documentation/javascript/examples/

Recently i worked on google maps, and below is the code where you can drag and drop the marker, and it works perfect in mobile web browsers.

gmap : function(lat,lng){
            var stockholm = new google.maps.LatLng(lat, lng);
            var parliament = new google.maps.LatLng(lat, lng);
            var marker;
            var map;
            function initialize() {
                var mapOptions = {
                    zoom: 13,
                    disableDefaultUI: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: stockholm
                };
                map = new google.maps.Map(document.getElementById("gmapDiv"),mapOptions);
                marker = new google.maps.Marker({
                    map:map,
                    draggable:true,
                    animation: google.maps.Animation.DROP,
                    position: parliament
                });
               var infowindow = new google.maps.InfoWindow({
                   content: 'content'
               });
                google.maps.event.addListener(marker, 'click', function(){
                  infowindow.open(marker.get('map'), marker);
                  });
            }
            initialize();
        }
Shreedhar
  • 5,502
  • 3
  • 22
  • 27