View Full Version : Ext.MAP js issue - markers clickable on web but not on iOS simulator

20 Jun 2011, 7:12 AM
Hi - I'm trying to use Ext.MAP to create a google map with a number of clickable maps. I'm loosely following a Sencha tutorial I found on how to do this. On the web, the markers are clickable (although the google marker bubble draws itself poorly, but on the iOS simulator, I can't click the markers. Here's my code:

t_contact = new Ext.Map({
title: 'Contact',
useCurrentLocation: true,
mapOptions: {
zoom: 12

var locArray = new Array (nyLoc,caLoc,seaLoc);

for (var j = 0, jn = locArray.length; j < jn; j++){

addMarker = function(loc) {

var markerLoc = new google.maps.LatLng(loc.Lat, loc.Long);

var marker = new google.maps.Marker({
map: t_contact.map,
position: markerLoc

markerBubble = new google.maps.InfoWindow();

google.maps.event.addListener(marker, "click", function() {
markerBubble.open(t_contact.map, marker);


20 Jun 2011, 1:12 PM
I am having the exact same issue where I run this on the Chrome web browser and the click event gets fired on the marker but when I look at my page on my Android phone the click event is not getting registered.

Other notes of interest:
I am including this in my code flow
google.maps.event.trigger(firstMarker, 'click');
and the info window pops up on this firstMarker with this call but other markers are not responding to physical clicks and when I close the info window this firstMarker is not responding to clicks.

Also, I have a draggable marker on the same map and I can drag it and it will fire off the dragend event.

20 Jun 2011, 10:18 PM
Here's a patch I use that I found on these forums awhile ago, just load it sometime after loading sencha touch but before initializing the map view

Patch for open sencha touch bug which prevents google map clicks from registering on mobile browsers

Source: http://www.sencha.com/forum/showthread.php?117876-OPEN-642-map-on-1.0.1-not-responding-to-click-events-on-iPhone-Android&p=554943&viewfull=1#post554943

Ext.gesture.Manager.onMouseEventOld = Ext.gesture.Manager.onMouseEvent;
Ext.gesture.Manager.onMouseEvent = function(e) {
var target = e.target;

while (target) {
if (Ext.fly(target) && Ext.fly(target).hasCls('x-map')) {

target = target.parentNode;

this.onMouseEventOld.apply(this, arguments);

Hanni Sullivan
20 Jun 2011, 10:38 PM
Or you could try the solution which uses the 'mousedown' event by fsjay found here (http://www.sencha.com/forum/showthread.php?109483-Android-and-click-events-on-map&p=612117&viewfull=1#post612117).

Hanni Sullivan
21 Jun 2011, 5:06 AM
I tried the mouse down solution and it works like a charm for me.

21 Jun 2011, 5:11 AM
Yup, mousedown worked for me. :)

Also, if you want to use a custom infoWindow like InfoBubble, you will need to modify their code to use mousedown instead of click.

21 Jun 2011, 6:54 AM
I used the map patch and it worked well. Thank you both for the responses. I think I am going to stick with the patch method in case this is fixed in the main sencha library. I think I would prefer keeping my code following google best practices of using the click event.

21 Jun 2011, 8:09 AM