CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
Luke
Luke

Reputation: 2168

Smooth Page Transitions in Google Maps

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.

Upvotes: 1

Views: 129

Answers (1)

kevmc
kevmc

Reputation: 1294

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

Upvotes: 3

Related Questions