A powerful visual aid such as a map helps to put things in perspective. For some businesses, maps are indispensable. Think travel businesses or store-locater maps, among others. The problem though is that scrollable Google maps are notoriously slow, with each map sometimes making over a hundred HTTP requests and bloating the web page size. Hence, static maps.

Why Google maps are bad for your website?

Many speed testing services like GTmetrix or WebPageTest 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.

Grab any URL with a dynamic map and run a test. Notice the inordinately high number of HTTP requests going to Google to load maps. To validate, remove the map from the page, re-run the performance test, and note the speed gains. The results are dramatic. After the scrollable map is removed, page size reduces by hundreds of kilobytes, number of requests drop by almost a hundred, and page speed improves drastically. But excluding maps from websites is not practical – a feature important for many websites.

Google map alternatives: Free static maps

If you look for answers to “How to load maps faster on your website?”, research might suggest using screengrabs of scrollable maps but that comes with a cost of unreliable resolution. Therefore, the search result keyword you should look for is static maps – a fabulous idea to serve fast, beautiful maps, directly from professional map providers. A few companies offer free static maps with an accompanying version of Fair Use Policy (FUP), which should suffice for many businesses.

What are static maps?

Think of a static map as a simple 100-200 Kb JPG or PNG image 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. As shown below, you may grab the map code from the provider and insert it into your WordPress site using standard Gutenberg blocks such as Custom HTML or the Image block (with custom URL).

Embed HTML Block (Code)

Embed Image Block (URL)

A Hybrid Style Static Map | Source: Yandex

5 static map providers for your website

Out of a total of half-a-dozen providers, including HERE Maps, we recommend the following five static map providers:

• Google,
• Yandex,
• Bing,
• MapBox, and
• MapQuest

Here is a quick comparison of how map providers stack up against each other on key features. Please note that there are many factors of comparison and this is just one take, kind of like a bird’s-eye view, of which map (or maps) might fit your site’s requirements.

Next, for each map provider, let us dive into the process on how to create static maps and use these on your website.

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>

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:

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

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:

<div><iframe sandbox 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>

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:

<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" />

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:

<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%" />

Are static maps difficult to implement on your website?

No.

The few hours you’d need to learn creating static map code strings will make you happy with the performance results – faster page speeds, retention of a reader’s experience and, a potential SEO enhancement too. If you want to focus on reducing the number of plugins, a faster site, and stylish-looking maps, consider static maps. It gets easier with every map you create.

Indeed, if you do not wish to manually construct the static map URLs, help is just 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. It is 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.

Pro Tip If you want to maximize the free usage limits, consider optimizing 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.

Which is the best map for your website?

Choosing a map provider will be governed by your business requirements and budget. We like the features and ease of use that Yandex or Google offer. Of course, you may deploy any static map provider or a combination of these amongst various categories of posts. We suggest you to try each before making a commitment. Here’s an infograph to summarize things up.

Conclusion

Incorporating maps into a website can enhance user experience and provide valuable location-based information. However, dynamic maps can increase the page size and slow down website performance. Static maps offer an effective solution by optimizing the web page and delivering faster load times.

Google Static Maps API, Mapbox Static Images API, Bing Maps, and even OpenStreetMap (OSM) each offer unique features and pricing models. By understanding the benefits and limitations of each provider, you can select the best option for your specific needs.

What kind of maps do you use for your site? Have you tried static maps? How is your experience? We are happy to hear from you. Write to us.