marker setPosition not working in Safari (sencha touch)

152 views
Skip to first unread message

luis

unread,
Sep 10, 2010, 2:22:01 PM9/10/10
to Google Maps JavaScript API v3
I am using Sencha Touch to develop a mobile version of a Bus Tracker
for Boston University. The problem I a running into is that the method
setPosition() for a google.maps.Marker is not rendering the position
change in Safari or any Mobile browser.

The code set up is as follows:

- I initialize an empty markers array
- I initialize the map using Ext.Map() (sencha call)
- I load data using a JSONP request every 5 seconds interval
- Every time I get new data, I check if I have a marker for that bus
id inside my markers array
- If I don't I create a new marker and push it into my markers array
- Otherwise I call setPosition with my new position on that marker in
my markers array.
- I then run a check to make sure the marker's position got updated
to the position received from my JSON request

I have verified (I think) that the marker inside the markers array is
getting the new position everytime. Also, in Chrome and Firefox, my
buses move (as expected), but in safari and iPhone/Android browsers,
nothing moves.

Here is the code snippet:

var markers = {};
var busesFunc = function()
{
Ext.util.JSONP.request({
url: 'http://m.cms-devl.bu.edu/rpc/bus/livebus.json.php',
callbackKey: 'callback',
params: {
},
callback: function(data) {
buses = data.ResultSet.Result;

for (var i = 0, ln = buses.length; i < ln; i++) {
var bus = buses[i];

var position = new google.maps.LatLng(bus.lat,
bus.lng);

if(!markers[bus.id])
{
markers[bus.id] = new google.maps.Marker({
map: map.map,
title: 'hello',
clickable: true,
draggable: false,
position: position,
icon: "images/bg.png",
zIndex: 100
});
}

markers[bus.id].setPosition(position);
//markers[bus.id].setIcon("images/bg.png");
//markers[bus.id].setMap(map.map);
//markers[bus.id].setMap(map.map);

if(bus.lat != markers[bus.id].position.lat() || bus.lng !
= markers[bus.id].position.lng())
{
console.log(bus.id + " " + bus.lat + " " + bus.lng);
console.log(bus.id + " " + markers[bus.id].position.lat()
+ " " + markers[bus.id].position.lng());
}
}
}
});
}
setInterval(busesFunc, 5000);


You can view the sample here: http://www.bu.edu/nisdev/students/luiscarr/liveBusMobile/

And the whole javascript is here: http://www.bu.edu/nisdev/students/luiscarr/liveBusMobile/functions.js

Nianwei Liu

unread,
Sep 10, 2010, 8:57:49 PM9/10/10
to Google Maps JavaScript API v3
I remember on Sencha forum there are some threads dealing with markers
not been shown. Have you checked those? It's related some async issue
when Sencha thinks some DOM component is ready before it's actual is.
Reply all
Reply to author
Forward
0 new messages