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.