StaticMap: A Google Maps API Wrapper

I love the Google Maps API, it’s fairly easy to use, well documented, has lots of features to tweak and extend beyond the obvious. However, it’s hefty. The initial load with map assets can easily total 300K, and visibly slow down your site especially if you are providing more than one map on a single page. So, to solve these issues I decided to write a thin layer around the Maps API.

The idea is simple: a map doesn’t need to be interactive unless the user wants to interact with it. Unless your page’s sole focus is the map, it doesn’t make sense to load a fully featured interactive map every time the page renders. Google provides the Static Map API, which can generate an image-based map for you on request. It’s well documented, but building the URL for the image map can take a while, especially if you are putting markers on the map.

That’s where my StaticMap class comes in. You simply instantiate it with a few options, and it generates the map for you: 

new core.StaticMap("#MapArea", {
    "api_key" : "<GOOGLE_MAPS_API_KEY>", 
    "size" : [298, 298], 
    "center" : [41.9288, -87.6315], 
    "zoom" : 10,
    "markers" : [
        {
            "coordinates" : [41.9228, -87.6632],
            "title" : "Title 1",
            "description" : "Description 2"
        },
        {
            "coordinates" : [42.9228, -88.6632],
            "title" : "Title 2",
            "description" : "Description 2"
        }
    ]
});

But wait, there’s more. When the image map is generated, it’s possible to simply click on it, and StaticMap will load the interactive Google Maps API for you dynamically if it’s not available yet, and then it will replace the image based map with an interactive one, while keeping your markers intact. You can see a demo here.

I am using this on a few Django projects right now, so the documentation is geared towards that. But it should be fairly easy to adapt it into any kind of framework.

If you are interested in using it, feel free to grab/fork it from its repo on GitHub. Dependency, installation and usage details can be found in the README file. I hope this will be useful for other people as well.

Comments (1)