Embed a customized static map to pages in bulk

Now that you have created several location pages on your WordPress site with MPG, it’s time to optimize each page with a Google map. After all, a map is a great tool for local landing pages (aka city landing pages) since they pinpoint your business location for your potential local customer. That way they can recognize routes and it increases the chances of them visiting your store. Even if you don’t have a physical address to receive customers, a map in your landing page is a reminder to the user that you still provide services to that specific area.

Hi, I’m Laura with MPG, the Multiple Pages Generator WordPress Plugin.

Static maps are a great way to make your page less heavy, so if you don’t need an interactive map, this is the way to go.

Now, since 2018, Google requires you to sign up to the Google Cloud Platform Console and enable billing on a credit card in order to get an API key which you will need to generate a static map.

The pro side to it is that you get usage reporting, support, a lot more options on how you want your map to look like and a 200 dollar free monthly credit that goes a long way.

Google has a pretty straightforward step-by-step on how to get an API key, so I’ll leave the link in the description.

Link: How to get a Google API Key

Now, as we saw on our video on how to set up MPG, all you need is a CSV file and a template page to create multiple pages in bulk with MPG.

Since the CSV file we used already included a list of cities and their states, all we need to do is insert the code for the map into our template page.

You can get the code through Google, simply go to:

https://developers.google.com/maps/documentation/

Click on Maps Static API

Then go to Developer Guide

Here you find several examples on how to style your map, from zoom, markers, fill color and much more.

You can also specify your location using your address or latitude and longitude, but those need to be listed in your CSV file first in separate columns.

So since we just want a static map of each of our cities, you can just copy the code example and paste it on a code block of your template page.

Now, remember that this is a code that will appear as an image, so select code block and write img src equals open quotes, then paste your Google Map code.

Insert your API key where it says ‘Your API Key’.

And here, where Google included the example ‘Berkeley, CA’, simply include the shortcodes ‘{{mpg_city}}, {{mpg_state}}’.

There you go!

Update your Page and now each of your new pages has its own static map.

Let’s test out our links, so Dallas and Mesa. Alright!

Now here’s a bonus tip:

Go to https://staticmapmaker.com/google/

This is a free online tool that makes it much easier to customize your map however you like.

The step-by-step is the same.

After you insert your API key, customize the map however you like, then copy the HTML code generated.

Add that code to your template page and substitute the location data for your MPG shortcodes. Even here on the alt-text.

Click Update and that’s it!

Let’s look at one example, like Fresno.

See, even the alt-text is automatically changed.

If you liked this video please give it a thumbs up and subscribe to our channel.

If you want to know more about MPG go to www.mpgwp.com.

Thanks for watching!

  • Why use a static map

    Static maps generated by Google are perfect if you want to showcase a specific location without making your page heavy with the Javascript required to generate an interactive Google map.

    The static map can be completely personalized with a specific size, zoom, marker, etc, and will appear on your website as a jpeg image.

    Screenshot wordpress page with static map

  • How to get a Google Map API Key

    Since 2018 Google requires you to sign up to the Google Cloud Platform Console and enable billing on a credit card in order to get an API Key. It also became mandatory to have an API key on each one of your embeded maps for them to work smoothly.

    The pro side to it is that you get a lot more support and usage reporting by officially becoming a paying customer, and you get a $200,00 free monthly credit that goes a long way. Google estimates that most business won’t ever reach their monthly limit and the system works as a pay-per-use.

    Learn more about the pricing here and get your Google Static Maps API Key here.

    Get API Key Google Maps screenshot

  • Embed a map to multiple pages

    The MPG: Multiple Pages Generator plugin can generate an unlimited number of pages with just one template page and a CSV file, see how it works. The file needs to contain all of your variable data separated into columns. So to embed a different map to each new page you need to have columns with your address information, like street name, city, state, country, etc.

    Once you have the CSV file with the address information uploaded to the MPG plugin you just need to edit your template page with static map HTML code.

    Multiple Pages Generator plugin dashboard location CSV

  • Get Static Map HTML code

    There are two ways you can get the HTML code for a Google Static Map.

    First, go to: https://developers.google.com/maps/documentation/maps-static/dev-guide

    Here Google gives you the step-by-step on the different styles and modifications you can do to your map and what the code looks like for each one.

    This is the example code for a Static Google Map of Berkeley, CA:

    https://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&key=YOUR_API_KEY

    The second way to get an HTML code to a static map is to go to: https://staticmapmaker.com/google/

    This free online tool makes it very easy to see your map as you personalize it however you like.

    how to get a google static map HTML code

  • Embed code to the template page

    Copy the HTML code of the Google Static Map you created with the dimensions, zoom and style that you chose. Paste the code on a Code Editor text portion of your template page.

    Now simply replace the address data you see on the code to the corresponding MPG shortcodes. For example, on the Google HTML code, erase where it says ‘Berkeley, CA’ and write: ‘{{mpg_city}}, {{mpg_state}}’.

    Template page with location HTML and shortcodes

    And it’s as easy as that, now all of your thousands of new pages have their own custom map. Learn how to organize all of your location pages with filtered lists of internal links to create a comprehensive sitemap.

    Try it out!

All Tutorials