replicate google maps URL behaviour with javascript? url+"/@foo"

Question

google map does this thing where if I browse to, say, Australia, the URL changes to

https://www.google.com/maps/@-28.0345854,135.1500838,4z

I'm interested in doing something like this on my web application. So far I have this:

var baseurl = window.location.href.split("/@")[0]
window.history.replaceState( {} , 'foo', baseurl+'/@foo' );

which works just fine for adding "/@foo" to the url

My problem is that, after adding /@foo, the URL doesn't work, it 404es.

I'm not interested in modifying the brower's history, that's why I use replaceState instead of pushState.

anyway, is there a way to do this with js? or do I need server-side code to serve the appropriate page?

thankyou

Answer 1

You "need server-side code to serve the appropriate page". an @ character is still part of the URL and therefore needs to be handled by the server. If you want to handle the this kind of situation client side only then what you want is to use # instead. anything after a hash is handle client side and does not trigger a new page to load from the server.

Several libraries use this to replicate routing in a single page HTML only app. For example:

• Backbone.js Router
• jQuery-Router
• jquerymobile-router
• Ember.Router

And many more.