Question

I have another question which needs resolving as it is rather irritating. I have been working on an app for a while and i managed to get it working nicely.

Specifically, the google map feature is supposed to have markers which appear and when you click on them, the screen is supposed to zoom in and display some information regarding the marker. Now, I have coded this in and it works perfectly when you test it out on Chrome. But when I tried to port it over to the tab device itself (Samsun Galaxy), there is no activity whenever i try to touch the markers whatsoever.

I am rather baffled and miffed by this, as the action of touching the marker should be the same as clicking on it using a mouse, am I not mistaken? I was wondering if anyone else could give me any help with this, as it is something minor which is causing one hell of a hiccup for me.

The code I have added below:

var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32));

trafficMarker = new google.maps.Marker({
  position: new google.maps.LatLng(TrfAl.lat, TrfAl.lon),
  animation: google.maps.Animation.DROP,
  map: mapPanel,
  icon: marker_icon,
  id: 'trafficAlertPanel' + i,
  componentId: 'trafficAlertPanel' + i,
});
markerArray[i]=trafficMarker;

google.maps.event.addListener(trafficMarker, 'click', function(){
  console.log('clicked!');
  LoadIncidentMap(this.id.substring(17));
});

Answer 1

For some reason click events don’t fire for taps on android and iOS. One work-around is to use the ‘mousedown’ event instead, which will fire on tap.

google.maps.event.addListener(trafficMarker, 'mousedown', function(){
    console.log('clicked!');
    LoadIncidentMap(this.id.substring(17));
});