views:

248

answers:

2

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)

A: 

[Sencha Person] markers not showing up is a known bug in the 0.93 beta release. The 0.94 release (current one) has this fixed.

Michael Mullany
Michael, thanks for your help. 0.94, did fix the problem (well, it made it consistent across browsers). But I figured if I do a unique JSON request each time, the problem would go away. So I added a timestamp parameter to my request, and it was all fixed. So I guess it was a caching problem with the JSON response rather than a google maps problem.
Luis Carrasco
A: 

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.

Luis Carrasco