How to speed-up your website with static google map alternatives?

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. While testing this website, I stumbled upon an alternative – static maps. Read on this 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.

Click to Learn More

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).

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, optimizing fonts, 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.

Click to Learn More

Google map alternatives: 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.


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.

1. 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=" /></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.

2. 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=";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.

3. 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 sandbox src="" 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.

4. MapBox Static Maps – A 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=",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.

5. 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=",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.

Are static maps difficult to implement on your website?

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?

 Pin this for later! 

Need help with a site?

We can help create beautiful WordPress blogs and sites. Our modular approach offers secure sites while optimizing operating costs and performance. Head over to our page on website design and development plans and get started.

Disclaimers: (1) Maps, wherever used on this site, serve a representational purpose only. Unakriti does not endorse or accept the boundaries shown, names, or designations used by map providers. (2) This story/article is based on the personal opinions of the author. Unakriti 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.

58 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!


  2. thefemalefactor

    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.

  3. I’ve been thinking about using maps in some of my posts! Thank you for the great insights

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

  5. healthyfitcouple

    Very informative. We always assumed that Google was the best option for maps.

  6. 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. Creative writing is great and we wish you lots of success!

  7. TheSuperMomLife

    I don’t have google maps on my site because it slows down my phone so much, but this is great info!

  8. 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!

  9. Very informative post. I do use Google maps in my website and will look into static maps

  10. Very helpful information, especially when traveling in unfamiliar areas. Thank you for sharing!

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

    1. Thanks. Yes, we can understand how challenging it can get when google maps do not work properly on the blog posts. We are glad you like the static maps alternative.

  12. This is very useful information. I really had no idea about this before landing on this page.

  13. I always wonder how all the travel blogger add the map in their post or webpage. Now I know! I always wanted to add one to my blog and this would definitely be useful for me.

  14. Thank you for the advice, I’d never thought about using maps before and the impact they have 🙂

  15. hi
    great article in the first place , i though have not used maps much by way of indicating a perspective to the readers but then maybe i should start thinking about it , let me go through some of your posts to get an idea of this

  16. I’ve considered adding maps to my website before, but haven’t because I was afraid of what it would do to my page loading speed. It’s good to know that there are other alternatives though!

  17. Useful! I haven’t yet put any maps to my blog, but at some point, I know I have to. I would come back to your post when I do.

  18. I always wondered how bloggers added Maps to their website.Thanks to your informative and detailed blog now I know.Thank you so much.

  19. This is super-useful, thank you! I’ve been struggling with wanting to add more maps on my site, but the slow load times put me off. This might end up being a great fix.

  20. Wow, didn’t know that using static maps can do miracles on a website and help optimize page speed! Great alternative to Google Maps! Shared your post!

Comments are closed.