Question

I’m building a web app that will track location of the user. I’d like to make it robust, for example, when a user looses internet connection the application will continue to track the users location (as far as I can tell GPS isn’t related to internet connection). Once the application detects an internet connection again it will create the markers.

if (navigator.onLine == false ) {

  navigator.geolocation.getCurrentPosition(function(position){

    var newLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    offlineMarkersArray.push(newLocation);

  }, Map.showError, {maximumAge:0.5});
}

The above code checks if there is an internet. If there isn’t it add the LatLng object to the array.

When an internet connection is rediscovered this code is run:

 Map.addOfflineMarkers = function(){
  for (var i = offlineMarkersArray.length; i > 0; i--) {
      var location = offlineMarkersArray[i];

      var localTitle = 'Offline marker '+i;

      var localMap = Map.getMap();

      marker = new google.maps.Marker({
         position: location,
         map: localMap,
         title: localTitle,
         icon: 'http://silas-tic.com/tick.png'
      });

      markersArray.push(marker);
      offlineMarkersArray.pop();
     }
  }

As far as I can tell, this will count backwards through the array creating a marker object that is attached to the map with a specific icon so that I can see it. As far as I can tell marker objects are being created but they’re not being added to the map.

Any ideas on how to fix this problem would be really appreciated!

The page can also be viewed at http://silas-tic.com. If you scroll down once there you can start tracking.

Answer 1

You want to start at (offlineMarkersArray.length-1) and count down to 0 (include 0):

Change:

  for (var i = offlineMarkersArray.length; i > 0; i--) {

To:

  for (var i = (offlineMarkersArray.length-1); i >= 0; i--) {