This content originally appeared on justmarkup and was authored by justmarkup
For most websites I build these days I have to integrate a map, mostly as a bonus for the contact page. Until now I simple used an Iframe loading a Google Map with the desired address centered. This however comes with a cost, even a realativeley small map loads ~600 KB (See this example of a 400×200 map).
That’s why I searched for a way to show the address in a visual way without loading unnecessary data and stumbled across Static Maps. Showing the example from above as a static map, we save ~550 KB, which is fantastic for news for performance.
Example of a Static Map
Ok, problem solved? Well, you could offer an additional link to the full map to give users a way to navigate through the map and you are probably good to go. Thinking about some of clients I know, this isn’t enough, they want a dynamic map directly on their site. And that’s way I created Maphancement (silly play of words from map and enhanced). It is a tiny JavaScript code which converts the static map into a dynamic map once the user interacts (clicks, drags) with the map. This way we still loose ~90% of KB on first page load, whereas we can still offer a dynamic map if desired.
You can find more infos and the code in the Github Repo.
This content originally appeared on justmarkup and was authored by justmarkup
justmarkup | Sciencx (2014-05-11T09:50:39+00:00) Maphancement – progressive enhanced Google Map. Retrieved from https://www.scien.cx/2014/05/11/maphancement-progressive-enhanced-google-map/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.