PDA

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



heaversm
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(locArray[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.setContent(loc.markerText);
markerBubble.open(t_contact.map, marker);
});

};

jgostylo
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.

themightychris
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')) {
return;
}

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.

fsjay
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.

jgostylo
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.

heaversm
21 Jun 2011, 8:09 AM
Thanks!