How to Load Maps Faster on Your Website?

How to Load Maps Faster On Your Website?

Scrollable Google maps are notoriously slow, with each map sometimes making over one hundred HTTP requests and bloating the web page size. Abhijeet Deshpande, while testing this website, stumbled upon an alternative – static maps. He shares an experience that might help you to speed up your site, potentially enhance your SEO ranking, and importantly, to retain readers. Here’s how to load maps faster on your website.

Share Your Story or Review Our Book!

If you write travel stories, like us, you might prefer to use maps to pin-point locations. Sometimes, readers just need a visual to put things in perspective. Or, if you are a store-owner, a store-locater map is just so indispensable. For the last one year of publishing articles here, we have relied on scrollable Google maps. Why? Simply because everyone else is using them and there are tons of plugins that make it super easy to do so.

Why Google Maps are Bad for Your Website?

It may not seem obvious that scrollable Google maps (or any scrollable map) can negatively impact your website’s speed. But, that can be so. Until recently, we used scrollable Google maps from a popular page-designer plugin. Our site load times were pathetic (it still takes longer than what we ideally want, but that’s likely due to reasons beyond the scope of this article).

 Pin this for later! 

I used speed and performance testing services like Google PageSpeed Insights, Pingdom, GTmetrix, WebPageTest, etc. These provide helpful recommendations – such as optimizing the image size, tinkering with how javascripts and stylesheets load, caching, and all the other good stuff. Following their bulleted advice made improvements trickle in. Yes, trickle in. Though every millisecond shaved-off is a tangible gain in site speed, the time and effort it takes versus the quantum of speed improvement can be frustrating, to say the least.

Right when I was to give up the process, I found a crucial piece of data – number of HTTP requests going to Google was inordinately high and most of these were to load the maps. That led me to remove a map from one of the posts and retest. The results far exceeded expectations – page size reduced by hundreds of kilobytes, number of requests dropped by almost one hundred, and page speed improved drastically. But I did not want to exclude maps – a feature important for our stories. Hence began a quest to find fast-loading maps and I ended up discovering a world beyond Google.

Free Static Maps

I was looking for answers to a specific query – “How to load maps faster on your website?”. Research threw up suggestions to use screengrabs of scrollable maps but that came with a cost of unreliable resolution. Then came static maps – a fabulous idea to serve fast, beautiful maps, directly from professional map providers. A handful of companies offer free static maps with an accompanying version of Fair Use Policy (FUP), which should suffice for many of us.

But, what are static maps? Well, I tend to think of these as simple 100-200 Kb JPG or PNG images served on-demand from a super fast cloud – sort of a snapshot of a dynamic map. All it takes your website to paint a browser with a freakishly stylish map is just one HTTP request.

Borneo

A Hybrid Style Static Map

5 Static Map Providers for Your Website

Out of a total of six or seven players, including HERE, I could successfully use five: Google, Yandex, Bing, MapBox, and MapQuest. Let us begin with a quick comparison of how these map providers stack up against each other (on key features). Please note that there are many factors of comparison and this is one take, kind of like a bird’s-eye view, of which map (or maps) might fit your site’s requirements.

Next, let us dive into a step-wise method (for each map provider) on how to create and use static maps on your website.

Google Static Maps – Generous FUP But Credit Card Required

Google itself provides static maps. Starting June 2018, Google has revised its policies and now seeks a user’s billing information upfront. All you have to do is:

  1. Login to Google’s Maps Platform and click on the ‘Get Started’ link to set up billing and enable Application Programming Interfaces (APIs).
  2. Create your first static map URL and insert it in a simple image tag (as shown below in blue) in a notepad. Just be sure to replace the string ‘Your_API_Key’ with your actual key.
  3. Copy that image tag with the URL and paste it in the text editor of your page or post, or where ever you want it to display. That’s it. Here’s a sample code:
<img src="https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY /></a> 

Cons: For someone not comfortable storing their credit card information on a cloud, Google static map can be a dampener.

Pros: The familiarity with Google maps, including its support for routes, makes it a hard choice to pass over. If you are okay providing your financial details, you get about 750K free map transactions per month (or 25k per day to be precise). Google’s FUP is the most generous.

Yandex Static Maps – Generous FUP and Keyless Operation

At 25K transactions per day, Yandex static map service matches the generosity of Google’s transactions and that too without the need for a credit card. All you have to do is:

  1. Login to Yandex Map Constructor and click on the ‘Map List’ link to create your first map.
  2. Enter the location/s of the place/s you want to display on the map, choose a zoom level, provide a title and a description, and hit ‘Save and Continue’. On the following page, choose the map type as static, a map size, and click ‘Get map code’ (should resemble the block in blue).
  3. Copy that code as-is and paste it in the text editor of your page or post, or where ever you want it to display. Here’s a Yandex sample code block and map:
<img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3A8c180d14b531039a0de81313063b83934dcbb952911d396ba39760d1d078b150&amp;width=600&amp;height=300&amp;lang=en_FR" alt="" style="border: 0;" /></a> 

Map of Thimpu, Bhutan

Cons: Yandex styling options can be relatively limited.

Pros: As mentioned above, at about 750K free map transactions per month (or 25k per day to be precise), Yandex’s FUP matches that of Google’s. Moreover, Yandex provides a keyless operation, i.e. you do not need to generate an API. Lastly, you get a powerful map constructor graphical user interface to work with.

Note: To see a Yandex map in action, click Backpacking Borneo: Bako National Park.

Bing Static Maps – Maps Without API Keys

Bing offers an easier, key-less mode of operation. Here’s how you can include a Bing static map on your website:

  1. Visit Bing’s map website, key in your location, and center the map as desired.
  2. Browse to More->Share / Embed to choose map-type as static, and other options to generate a code (should resemble the block in blue).
  3. Copy the code and paste it as-is in the text editor of your page or post, or where ever you want it to display. Here’s a Bing sample code block and map:
<div><iframe src="https://www.bing.com/maps/embed?h=300&w=640&cp=40.7884135685477~-73.7269685234375&lvl=9&typ=s&sty=r&src=SHELL&FORM=MBEDV8" width="640" height="300" frameborder="0" scrolling="no"><span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></iframe></div>

Bing Static Map (Road Map): New York City, USA

Cons: At about 10K per month of free map transactions (or 125k per year to be precise), Bing offers the least generous FUP. Depending on your usage, this is prone to quota overruns.

Pros: The ease of generating a key-less Bing map code (including for routes) via a Graphical User Interface (GUI) is its biggest strength.

Note: To see a Bing map in action in one of our custom posts, click The Sunshine Blogger Award.

MapBox Static Maps – The Map Playground!

You need an access token for MapBox. Just like a Google API, it is free and easy to get this for yourself.

  1. Create an account on MapBox and when you login to your account dashboard, you’ll find a default token delivered.
  2. Head over to MapBox Playground to generate a URL that you could insert in a standard image tag, as shown in blue (be sure to replace the string ‘Your_Access_Token’ with your actual token)
  3. Copy the entire image tag string, along with the proper access-token powered URL inside, to a text editor of your post or page. Here’s a MapBox sample code block and map:
<img src="https://api.mapbox.com/styles/v1/mapbox/light-v9/static/-77.03968,38.89744,5,0,0/300x200?access_token=Your_Access_Token" width="640" />

MapBox Static Map (Terminal Style): South Africa

Cons: At the time, MapBox only accepted longitude / latitude to specify locations and restricts latitude values between +90 to -90. Besides, I could not figure out how to create route maps.

Pros: The range of styling options to choose from is quite good and comes as an easy-to-use GUI. It’s worth to note that MapBox allows for a healthy 50K free map transactions per month.

Note: Click Ten Faux Pas to Avoid in North East India to see a MapBox map from our special category of North East India.

MapQuest Static Maps – Comprehensive, Beautiful Maps

You will need an AppKey to generate MapQuest static map URLs. Here’s how to go about it.

  1. Create an account on MapQuest and after a successful login create an AppKey.
  2. Visit MapQuest’s Getting Started with Static Map site and follow the instructions (depending on how your map should look) to generate your first URL and place it in a standard image tag, as shown below in blue (be sure to replace the string ‘KEY’ with your actual AppKey).
  3. Copy the entire image tag string, along with the proper URL (including the key), to a text editor of your post or page. Here’s a MapQuest sample code block and map:
<img src="https://www.mapquestapi.com/staticmap/v5/map?locations=Washington,DC&type=hyb&format=jpg&size=640,300&zoom=3&key=KEY" alt="Map of USA" width="100%" />

MapQuest Static Map: Vienna to Berlin

Cons: This one demands a bit of patience since it does not have a native GUI-based URL creation and the design options can be overwhelming. MapQuest offers a humble 15K free map transactions per month and, depending on your usage, this may result in quota overruns.

Pros:  Given the many styling options, MapQuest remains a tough choice to ignore. It is also a good solution to show route maps, highlighting places along the way with colorful markers.

How Much Time Do I Need for Static Maps and Is there A Simpler Method?

As a novice, it took me about 3-4 days to sort all of this and I am quite happy with the results – faster page speeds, retention of a reader’s experience (after moving away from scrollable maps), and, hopefully, a potential SEO enhancement in the waiting too! If you want to focus on reducing the number of plugins, a faster site, and stylish-looking maps, give it a try. It gets easier with every map you create.

Indeed, if you do not wish to manually construct the static map URLs, help is a click away! Head over to Static Map Maker, a free static map web service with an easy to use GUI for each of these maps and more. I found it a useful tool, except that, at the time, they were using a legacy version of Mapquest API. The direct Mapquest resource (version 5, referred above) has more styling options. Play with both and figure out what works best for your requirements.

Which is the Best Map for Your Website?

We now use a combination of Yandex, MapBox, Bing, and MapQuest static maps divided between various categories of posts we do here. It should allow us to maximize the free usage limits. We could further optimize the transactions by using only latitude and longitude values instead of location names. Remember, resolving common place-names, using layers, or excessive location objects adds to the number of geocode transactions per static map and eats up the quota.

Why not use Google? Well, we might do so in the future when our traffic exceeds the FUP of these four and if we then feel okay to store credit card information on a cloud. To help you, here’s another infograph that summarizes things up.

What kind of maps do you use for your site? Have you tried static maps? How is your experience?

Get new stories in your inbox

Disclaimers: (1) Maps, wherever used on this site, serve a representational purpose only. Backpacking Series does not endorse or accept the boundaries shown, names, or designations used by map providers. (2) This story / article is based on personal opinions of the author. Backpacking Series is not responsible for the accuracy, completeness, suitability, or validity and it does not assume any responsibility or liability arising out of use of any information provided herein.

36 thoughts on “How to Load Maps Faster On Your Website?

  1. I’ve always wanted to integrate a map on my website. Thanks so much for the advice!

    Love,
    Claudia
    http://thatsmeonline.net

    1. Thanks for stopping by Claudia. Hope you are able to integrate maps soon. Static maps are a great idea and now you know how to load maps faster on your website. You could see some of our other posts to make your choice! Good luck.

  2. I haven’t used a static map before. I didn’t realize there were so many options. The hybrid style from MapQuest looks really nice.

    1. Thank you for stopping by. It would be a good idea to give a try to static maps. We have found them good. You could check out some of the other posts to see these maps in action. Yes, hybrid style is a cool one!

  3. Interesting, I will definitely use these tips when using maps for my travel related content. Thanks, never considered the static map option before.

  4. Even though now I have a creative writing blog, some day I wish to become a traveler and would like to have a travel blog. Your advice will be helpful for me then. 🙂

    1. Thank you for stopping by Tushar. We hope you become a traveller soon and have your own travel blog! And when you do, you now know how to load maps faster on your website 🙂 Creative writing is an art and we wish you lots of success!

  5. Thank you for sharing. I always use google maps and I always think it’s faster and reliable. Now I’ve realized there are some other best maps. Great info!

    1. Thank you for stopping by Pujarini. Well, now you do have an option to give Static maps a try! Good luck. In case you would like to know how they will look, you can check out some of the other posts of on our website to see them in action.

  6. grateful that i bumped into your site. in south korea, we had hard time searching for place because google maps doesnt work properly

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses spam protection software. Learn how your comment data is processed.