Ad

Smooth Page Transitions In Google Maps

- 1 answer

I have been looking at various websites, and I am not sure how they can change the URL of a page, without the screen going white before loading and creating the effect of a single-page application.

The best example of this that I have found is Google Maps.

Even when you just move the map, the URL changes. Example:

https://www.google.com.au/maps/@17.130084,29.4713099,3z

https://www.google.com.au/maps/@43.4447851,98.7291224,3z

When you open these from Stack Overflow, or copy the link into the address bar and press enter, it takes about a second to load. But if you just move the map within the page, there is no apparent loading - just like the URL never changed.

Can anyone explain, specifically, how they do this? Also, I would appreciate some help on how they achieve this single-page-application-style transition with canvas in particular.

I have seen related questions on this site, but none have clarified the issue for me.

Ad

Answer

They will be using the javascript window.history.pushState() method to change the value in the address bar without navigating away from the page, refer to this MDN Article

Ad
source: stackoverflow.com
Ad