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
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
Share Improve this question edited Jun 9, 2016 at 8:18 duncan 31.9k15 gold badges81 silver badges101 bronze badges asked Jul 4, 2012 at 2:07 simon xusimon xu 9822 gold badges10 silver badges19 bronze badges2 Answers
Reset to default 18I 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.
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();
}