Emulate Google Maps location based url

Question

On google maps, after you land on the mainpage you see a default location (depends on your location I guess), and the url looks like this:

https://www.google.com/maps/preview

Once you move on the map the url changes, adds /maps and some parameters with LatLng and zoom

https://www.google.com/maps/@38.3206568,-120.9094382,10z

If you give that link to someone it will point to that particular location.

The site I'm developing shows a map on the landing page, so when you go to www.mymapsite.com you'll see a map with a default location. And then, when you move around I would like to add the same behavior described earlier (but without the /maps).

https://www.mymapsite.com/@38.3206568,-120.9094382,10z

I have this function inside the controller to update the path using the $location service:

$scope.updateMapTrack = function() {
    $rootScope.trackOptions = $scope.trackOptions;
    $location.path('@' + $scope.trackOptions.centerLat + ',' + $scope.trackOptions.centerLng + ',' +$scope.trackOptions.zoomLevel + 'z');
};

The problem is that this goes through the $urlRouterProvider.otherwise('notfound') and kicks me out of the map (showing our custom 404 error).

My questions are; what else should I modify on the $urlRouterProvider to allow this behavior?, I should use something different to change the url?

I will also thank you if you provide a different approach to achieve this.

Answer 1

Finally I made it work :) (but from the low visits on this question I don't feel I will be helping a lot of people)

It took a lot of changes, just in case someone wants to do something similar in their sites, here is a short version of what is needed:

• When updating the URL, you must use .replace()

  $location.path(newPath).replace();

• To get control of the routing routine, $urlRouterProvider.deferIntercept(); must be added, like described here, this provide handling for some edge cases.

• To redirect to a default location on the first landing:

  $urlRouterProvider.when('/', defaultTrackingOption);//the same for other landing possibilities

• The routing url matching for the controller must have a regex to match the tracking pattern (mine was so basic that I can't even share it here)