Search code examples
javascriptbrowser-historyurlvariables

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

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

Solution

  • 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:

    And many more.