Question

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 called functions.js (I can’t post more than one link)

Answer 1

Problem solved by making a unique request every interval. I figured it was a caching problem after some more debugging. So I added a timestamp parameter to the JSONP request and it was all fixed.