How Toolset and the Maps Static API Can Help You Cut Costs

   Kathy Banach

How to

October 3, 2022
8

With Toolset Maps, you can add dynamic maps powered by Google or Microsoft Azure to your website. However, there’s no hiding that interactive maps come at a cost. By using Toolset with the Maps Static API, you can easily continue displaying locations for your clients at a much lower cost.

Business owners know that maps can be a great addition to their website. They make it easier for customers to get directions to the business and discover more about their products or services. 

If you’ve gone through our courses, you already know how to use Toolset to display a simple map, display a list of posts on a map, and add a map to templates for single posts.

Here are just a few examples of creative ways you can use maps on your WordPress website:

Share the exact location of your business

Showcase the locations of upcoming events

Display the locations of all of your businesses

Highlight the location of services nearby

Unfortunately, the costs of using dynamic maps rises as your website grows and experiences more traffic. Every time a visitor loads a map on your site, the returned map counts towards Google’s Javascript API use. This can quickly bring your costs up into the double, and even triple digit territory. 

To help you reduce some of these costs, Toolset Maps uses caching. When an address is provided, Toolset stores it alongside the corresponding coordinates in a custom database table. This way, the same addresses don’t need to be converted into coordinates over and over again.

However, while the caching of locations reduces requests, it doesn’t completely eliminate them. There is an alternative solution, though – instead of relying on the dynamic map APIs, you can output static map images. Let’s dive in and see how static maps work with Toolset. We’ll use Google Maps Static APIs as an example, but you can also find a similar solution with Microsoft Azure APIs.

The Difference Between Dynamic Maps and Static Maps

The JavaScript Maps API delivers interactive maps with functions like zoom, info windows, scrolling, and markers that can display tooltips and pop-ups.

In the screenshot below, you can see that with Toolset, it’s also possible to add search functionality to interactive maps. Upon clicking on the marker, a pop-up with the exact address of the chosen location appears.

An example of an interactive map with zooms and markers that display tooltips

On the other hand, the Maps Static API allows you to embed a Google Maps image on your website without requiring JavaScript or dynamic page loading. Using URL parameters, you can describe the type of map you want and Google will send it back as a .png image. 

As the image below shows, you can add markers to static maps. It’s worth noting they are embedded into the image, so you can’t add any custom labels to them. You can, however, use custom icons in place of Google’s default marker pins.

An example of a static map with a default marker pin

And although static maps aren’t interactive, it is possible to link the map image to a free, fully-interactive map on Google Maps (or the Google Maps app).

Because static maps return a standalone image, they are significantly less costly than interactive maps. As of September 2022, the JavaScript Maps API costs $7 per 1000 impressions, while the Static Maps API costs $2 per 1000 impressions.

When to Use the Maps Static API

Static maps can be useful when you just want to display a map and don’t need any interactivity. This includes situations where:

  • You want to give your customer an idea of where your business is located
  • You want to show the locations of different tourist attractions on one map
  • You simply want to add markers to highlight specific areas or places

It’s worth noting that static maps may not always be the best option for your website. You can’t, for example, use static maps in place of a map that displays a list of posts by using the View and Map blocks together. On the other hand, if you’ve been using a View to display map thumbnails on your posts, static maps may be a great option.

Getting Started with the Maps Static API 

Before starting, make sure to enable the Maps Static API. You can find more information about creating and updating API keys in Toolset’s documentation about creating API keys for using Google and Microsoft Azure Maps in WordPress.

Once you have the API key, the base of your URL should look like this:

https://maps.googleapis.com/maps/api/staticmap?

You then need to add the following four required parameters to the URL:

  • Center – the coordinates or the name of the location where you want the map to be centered
  • Zoom – the zoom level of the map, between 1 (world view) and 20 (building view)
  • Size – the width and height of the map in pixels
  • Key – your API key

Of course, you can also add a number of other optional parameters to your URL. 

As an example, here’s a map centered on the Empire State Building in New York:

https://maps.googleapis.com/maps/api/staticmap?center=empire+state,new+york,NY&zoom=16&size=640x640&maptype=roadmap&markers=empire+state,new+york,NY&key=YOUR_API_KEY

If you were using the legacy editor and needed to add the HTML directly to your template, you’d need to add an img tag and specify the URL in the src attribute, like this:

<img src=https://maps.googleapis.com/maps/api/staticmap?center=empire+state,new+york,NY&zoom=16&size=640x640&maptype=roadmap&markers=empire+state,new+york,NY&key=YOUR_API_KEY">

With the block editor, you would use a Custom HTML block or Toolset’s Fields and Text block to add the same HTML.

In both cases, this is how you’d then see the image on the front-end: 

A static map centered on the Empire State Building in New York

But wouldn’t it be great if you didn’t need to include the exact map image in your template? Ideally, the map should update dynamically based on the saved address for the post being displayed. 

That’s exactly what you can do using Toolset’s Types API functions.

How to use Types to Add a Static Map to the Content Template of a Post Type

Now, we’ll show you how you can add a static map to the content template of a post type that has an Address field. To dynamically generate the correct URL parameters of the request, we’ll use the Types shortcode for the Address field:

  1. Go to Toolset → Content Templates and Edit the template for your post type.
  2. Insert the Shortcode block.
  3. Use the Types shortcode for the Address field to provide the coordinates from the Static Maps API request URL placed within the img tag and src attribute. Make sure to replace the ‘address-field´ placeholder with the slug of your Address field. As an example, here is what our shortcode looks like: 
<img class="static-map" src="https://maps.googleapis.com/maps/api/staticmap?center=[types field='location' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&zoom=16&size=640x640&maptype=roadmap&markers=|[types field='location' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&key=your-api-key">
  1. Click on the Update button and view your changes on the front-end. You should see the map image update dynamically on a post-to-post basis.
The static map image on the front-end

Hint: To make sure the map displays nicely on various screen sizes, you can preserve the image height by adding the following CSS:

.image-cover {
  object-fit: cover;
  min-height: 400px;
}

Using Types to Link the Static Map Image to an External Dynamic Map

You can also use Types Fields API to link the static map images to free, dynamic maps on Google Maps. To do this, you need to wrap the img tag inside of a link tag, with the href attribute pointing to a Google map using dynamically generated coordinates.

Here’s an example of the shortcode you can add to  your Content Template:

<a href="https://www.google.com/maps/place/[types field='address-field' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]/@[types field='address-field' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types],16z">
<img class="static-map" src="https://maps.googleapis.com/maps/api/staticmap?center=[types field='address-field' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&zoom=16&size=640x640&maptype=roadmap&markers=|[types field='address-field' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&key=your-api-key">
</a>

Of course, you need to replace the address-field placeholder with the slug of your Address field and introduce your API key.

The result? A clickable map image that links to an interactive map on Google Maps!

A static map image linking to a dynamic map on Google Maps

Wrapping Up

No matter what type of business you own, maps are a great way to visually share information about your business, products, and services with your site’s visitors. Dynamic maps let your visitors interact with your website by offering functions like tooltips, zooming, and panning, but the costs can quickly begin to skyrocket.

With the Maps Static API, you can easily embed map images on your website. While the maps are not interactive, they’re budget-friendly and can still be customized with markers or custom icons. By adding Toolset into the mix, you can also: 

  • Dynamically display the correct static map image on each post type
  • Dynamically display static map images that link to external, dynamic maps on each post type

Do you use static maps? Did you know you can use Toolset to dynamically display static map images on your website? Let us know in the comments!

There’s more!

This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!

Other articles in this series:

 

Comments 8 Responses

  1. Quick heads up…can you check the styling on this page, it doesn’t seem to reflow nicely on mobile.

    • Thanks for the heads up, Stephen! We’ve fixed the styling issue and everything should flow as expected on mobile now.

  3. Hello Kathy,

    I understand the use of static maps, but I don’t get the need for this in terms of costs. If Toolset caches all posts addresses upon saving, an interactive map showing only elements with cached addresses should cost nothing or am I wrong ?
    thanks

    • Hi Nicola,

      Thanks for your comment! By caching coordinates, Toolset reduces the geocoding API calls. Every time an address is provided, it is stored alongside the corresponding coordinates in a custom database table. This way, the same addresses do not need to be converted into coordinates again. However, there are also costs that arise from displaying dynamic maps. Google’s Javascript Maps API is hit every time a user loads a map on your site, and these costs grow as the traffic to your site grows. For these hits, there is no caching available.

  4. This is what Toolset was, should be and always should stay 🙂

    A power bundle of dynamic Shortcodes.

    You cannot do these things with Blocks!
    Using a “text and fields” or “shortcodes” block is literally an oxymoron IMO. What you de-facto do is leveraging the power of shortcodes nested in HTML, which has yet to be toppled by the blocks implementations of any kind.).

    Cool post, this is the sort of things that can keep Toolset going for the next 10 years at least. It is what all the users I help build websites end up with (due to restrictions of the blocks things), and it is what makes toolset better than anything else around, right after bare bones code.

    • I agree, however there are elements of blocks that also work well and for things like a user being able to create a latest post block that looks nice it can be great, and blocks was one of the first great tools for a better WP container block which made using gutenberg possible early on. Since been surpassed in features and usability by other block only plugins sadly. Also on the other side for things like CPT filtering they have also been surpassed by tools that are simply faster using the restapi . I’d love to see toolset split into 2 teams/plugins that work together one for Blocks and one for what toolset used to be. However both of those routes need code overhauls I’m not sure toolset has in it.