Make Maps into Static Images

In a single image, maps can communicate a lot about the world around us. Whether it’s directions from point A to point B, or a glimpse at all of your customers in a region, a map tells a story. Like the picture that’s worth 1,000 words, a map can be the same. And while we obviously love interactive maps, there are situations where a static map image does as good or better.

For example, say you want to embed a map on Facebook or Twitter or even email. An interactive map won’t work there, for technical reasons. Instead you need an image version of the map. There are several services that can generate maps, complete with marker icons, into static images. In this post, we’ll share several of these options and discuss the pros and cons of each.

Differences in Static Map Generators

We’ll go into detail about each of the map generators in the next sections, but first it’s good to get an idea of the common themes. There are three main areas to consider when comparing static map generators:

  • How data is sent: In many cases you need to know the map coordinates, the latitude/longitude pairs that describe a location on a map. However, others allow you to send the human-readable names or addresses, and do the geocoding conversion to coordinates for you.
  • Style of the maps: Usually the ways the maps and markers look are already decided for you by the mapping provider. However, in a couple circumstances you can customize the look. The tradeoff, of course, is in complexity and the time it takes to set up.
  • Requirements: While every provider mentioned here offers free versions, some have advanced features available for a cost. And, in many cases, even the free versions require you to register for an account and/or an “API Key,” that identifies your static map requests as yours.

With these issues covered, we’ll get into what’s possible with each of these static map generators.

BatchGeo

Every interactive map made with BatchGeo also has a corresponding static map badge, an image you can use with or without the larger map. There are no API Keys or URL patterns required, though you do need to use the BatchGeo editor to make updates to your image map.

To create a map, follow these steps:

  1. Paste your spreadsheet data into the map builder and make sure to enter your email address when saving.
  2. You should receive an email shortly after saving your map with details on how to edit it.
  3. Click to the edit link, and scroll down to the “map badge” code section.
  4. Copy/paste the code onto your web page, you are done!

The image itself does have a few optional tweaks you can make to the URL, which looks like this:
https://static.batchgeo.com/map/png/?i=national-parks&width=284&height=142

To adjust the size or shape of the image, just change the width= and height= fields in the URL before saving the file.

BatchGeo also includes a number of ways to customize the style of your map. When creating your map, choose “Validate and Set Options,” then select “Advanced Options” to change the color and shape of the markers, as well as select from six underlying map styles.

Google

The de facto choice for interactive maps also has static image mapping available. While the search giant refers to this tool as the Static Maps API, it’s not an API in the usual tech sense. That’s because you can use it without writing a single line of code. Rather, all of the inputs needed to create a static map with Google come through the URL.

Consider the above image, which was generated from this URL:
https://maps.googleapis.com/maps/api/staticmap?center=37.819722,-122.478611&zoom=12&size=400×300&markers=37.819722,-122.478611&markers=37.799,-122.4664

Each parameter can be changed and will update the map in some way. While this example uses latitude and longitude coordinates, one of the best features of Google’s static maps are the built in geocoding. For example, here is the URL for a similar map, using human-friendly values:
https://maps.googleapis.com/maps/api/staticmap?center=Golden+Gate+Bridge+San+Francisco+CA&zoom=12&size=400×300&markers=Golden+Gate+Bridge+San+Francisco+CA&markers=Presidio+San+Francisco+CA

The result is a bit longer, but much easier to update. While this example uses two landmarks, you can also use city names, postal codes, and full addresses, right in the image URL.

In addition, Google supports a bunch of advanced features, like marker colors, marker labels, and entire map style changes. Everything can be set from the URL, though for these more advanced uses, you’ll definitely need an API Key to identify yourself. You can find out more about all of this in Google’s documentation.

MapBox

MapBox is a lesser-known mapping provider that also appeared on our list of 3 ways to style maps. While its speciality is extremely customized control of how the map looks, including the ability to bring your own underlying data, it also has a static map service for its stock data.

The above image, similar to the Google example, was generated with this URL:
https://api.mapbox.com/styles/v1/mapbox/streets-v10/static/pin-m(-122.478611,37.819722),pin-m(-122.4664,37.799)/-122.478611,37.819722,11/400×300?access_token=TOKEN

All aspects of the map are generated from the data passed in the URL. If you look closely, you’ll find the center of the map, the points for the two markers, the zoom level, and the size of the image. Unlike Google’s states maps, MapBox does not use URL fields, but rather its own format of describing points, paths, and other “overlays” (mapping speak for any objects that can be added atop the base map). MapBox also supports an advanced overlay format in GeoJSON, a standard popular in web cartography circles.

Something to note about MapBox that is different from all the other providers: the coordinates to designate a place must be passed in “longitude,latitude” order. If you get that wrong, you could find yourself in the wrong quadrant of the world (or with an error about latitude out of range).

Looking at that URL, you may have also noticed the access_token field. MapBox requires an API key. With a free MapBox account, you can retrieve a public token here.

Of course, as you would expect with the customizability of MapBox, you can load any styles stored in your account. You can find all the options and details in the full documentation.

MapQuest

Are you surprised that this map granddaddy has a static map offering? Yes, the original web map has a robust developer platform, including interactive maps. While the underlying map cannot be changed, there are still many options available that make MapQuest a contender.

To generate the map above, use this simple URL:
https://www.mapquestapi.com/staticmap/v4/getmap?size=400,300&pois=default,37.819722,-122.478611|default,37.799,-122.4664&key=KEY

One thing MapQuest has going for it is smart defaults. When a map contains markers (which it calls POIs—points of interest), a center and zoom level are not needed. In fact, in our tests, the center field is ignored in favor of a centroid calculated from the markers on the map. This ensures that everything meant to be visible is part of the image. Other providers have this option, but it’s a requirement with MapQuest.

As with others, you can see that the API Key is a requirement. There are generous free limits available once you create an API Key.

Among the features most interesting in MapQuest is marker labels. You can replace “default” in the URL above to get any number of letter you want in the marker. Other customization options and examples are available in the documentation.

Bing Maps

Don’t count Microsoft out of this mapping fun. Through its search brand, Bing, there is an API for Bing Maps. Among the options in the Bing Maps suite is static maps.

That map looking familiar yet? Here’s how you can create it with Bing Maps:
http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/37.819722,-122.478611/12?mapSize=400,300&pushpin=37.819722,-122.478611&pushpin=37.799,-122.4664&key=KEY

While not called out as fields, the map type, center location, and zoom level are all included before the question mark in the URL. Like Google, you set multiple markers by duplicating the field (in this case, called “pushpin”). There are additional marker options to change the style and add labels.

Again, with Bing you’ll need an API Key. You can register and create one for free using the Bing Maps Portal. For all the various options available, see Bing’s static maps documentation.

Comparison Table

Feature BatchGeo Google MapBox MapQuest Bing
Human-readable names Yes Yes No No No
Coordinates style Two columns Lat,Lng Lng,Lat Lat,Lng Lat,Lng
Change map style Yes Yes Yes No No
API Key required Never Sometimes Always Always Always
Spreadsheet upload Yes No No No No

Beautiful, High Resolution, Printable Maps

Static maps are a great choice for websites where you don’t need interactivity, but you want to communicate the locations. You can also reuse them in social media, emails, and other places where interactive maps are not possible. Yet, sometimes what you need is something in higher resolution. For example, you may want to print a map or share a high quality PDF.

Every BatchGeo Pro account comes with unlimited high resolution maps for you and your entire team. Plus, you get lightning-fast map creation with support for interactive and static maps with up to 20,000 locations. Try it now!

Your Map Data To Go On Any iPhone or iPad

Wherever you are, you can view, filter, and search your maps faster than ever before. We have completely updated BatchGeo Mobile, our native iOS app for accessing your maps. You can now use any iOS device and see the same great interface to your map data that you’ve come to expect with BatchGeo.

BatchGeo Mobile features

Among the improvements we’ve added to BatchGeo Mobile are:

  • Updated to support the latest versions of iOS 10
  • Added Google Maps rendering for a consistent, fast look
  • Included our advanced mode features like heat map and data view

The latest enhancements for BatchGeo Mobile make it an even better choice for on-the-go maps. Use the GPS-enabled app for customer visits, sales maps, or other data you want to access anywhere.

Google Maps: Filter, Zoom, Select

As with the web version of BatchGeo, the iOS app now is built upon the industry-leading Google Maps platform. We’ve taken a speed-first approach, ensuring you can see your map and data as quickly as possible. To orient you easily, we’ve modeled the interface after the web version, so you know exactly how to use your data, no matter where you are.

BatchGeo Mobile filter options

Use the powerful grouping feature to drill down at a specific subset of your data. Non-location columns in your spreadsheet are available to filter your map by category values or numeric ranges. Maps with thousands of locations can keep you focused when you select just the fields you need to see in the moment. Pair this with your current GPS location, and you’ll see what’s important in any locale.

Find your nearest marker, search across the data, or drag and zoom your way to what you seek. Tap a marker to see its underlying data. BatchGeo Mobile means fast access to your own data.

BatchGeo Pro: Advanced Mode for Your Whole Team

The new version of BatchGeo Mobile also makes our popular advanced mode available on your iOS device. Visualize your data with heat maps, a layer that shows the density of your markers to show the “hot spots.” Or check out the details in your data with a spreadsheet-like view that takes you to each location in a click.

BatchGeo Mobile Advanced Tools: Heat Maps and Data View

You may have noticed that maps with many markers end up communicating density through the overlap of markers. Additionally, you can use clustering to aggregate and visualize underlying data. But neither of those quite get the story within the data across like a heat map. Our algorithm calculates the areas of highest density, then layers a partially-transparent visual over the map so you can see the underlying areas. Our customers frequently identify new insights with this view at their own data.

On the other end of the spectrum is data view, which helps BatchGeo Pro users dig into the details within their data. Use data view to take a quick look into tabular data akin to a spreadsheet. Sort by any field to find the best and worst in a category, then tap a row to see it quickly appear on the map above.

To turn on either of these features, tap and hold on your map, then select the option you’d like to enable. Inspect your locations with data view and make it come to life with heat maps.

Share Maps Across Web and Mobile

We think you’ll enjoy BatchGeo Mobile so much, you’ll want everyone on your team to see the world the way you do. That’s why we’ve built sharing into the app from the start. Some improvements in the latest version make it even more useful.

BatchGeo Mobile Sharing

Filter your map list to distinguish your personal maps from those the rest of the team is sharing. That way, you always know whose map is whose.

Even better, sharing maps with others is simpler than ever. Now BatchGeo Mobile supports both email and the native iMessage platform to send links to shared maps. You’ll save your team time and always have maps at your fingertips.

Try BatchGeo Mobile Today

BatchGeo Mobile is faster than ever, with a consistent look powered by Google Maps. Take advantage of grouping data, heat mapping, sharing, and more. Download BatchGeo Mobile today and access your maps wherever you go.

How to Embed a Map Anywhere

You have some data you want to put on a map, but then you want to make your interactive map available for others to use. You want to put that map into a website, on social networks, in emails, and everywhere else someone might look.

We’ve created this article to help you embed a map anywhere:

Are there other places you’d like to put a map? Let us know!

Embed a Map in HTML

If you have control of your whole website, or use a platform that lets you include full HTML, an interactive map is the way to go. You’ve likely used these to get driving directions, look up store locations, or find restaurant reviews. You can drag and zoom the map with your mouse, and there are icons on the map (typically called “map markers”) to show locations.

While these maps have become easier to create in the last decade, they still require some knowledge of JavaScript code to make them behave exactly as you want. Since learning to code is beyond the scope for many people who want to create embedded maps, we’ve compiled a few easy ways to make a Google Map.

Rather than learn to code, use one of these non-code approaches.

Point and Click Maps

Google provides a tool that allows you to create maps through its simple interface. You can create markers, lines, and add directions.

  1. Go to Google My Maps
  2. Click “Create a New Map”
  3. Click the marker icon, then click on the map to add markers
  4. To add addresses or businesses, search then choose “Add to map” in the results

Continue until you have all the markers on the map. To embed, choose the settings menu (three vertical dots) and select “Embed on my site” option.

You’ll need to make your map publicly shareable for the embed option to work.

PROS: Easy to create small maps
CONS: Unable to create complex maps, especially when marker filtering is needed

Copy and Paste Maps

Many times when you want to create an interactive map it’s because you have a lot of data you want to make visible. For example, you might have a spreadsheet of locations that you want to turn into a map. You want something as easy as copy and paste.

  1. Go to BatchGeo’s map maker
  2. Copy and paste your spreadsheet data, including the header rows

BatchGeo does the rest, up to spreadsheets with thousands of rows. It will intelligently find the columns that reference location data and there are options for you to override its settings. Then, it quickly turns every address into latitude and longitude coordinates on the map.

View US President Births and Burials in a full screen map

You can also use other columns in the spreadsheet to filter the map, such as only viewing locations by a specific type or category. In the example above, the map shows US president birth and burial locations. Using the menu in the lower left of the map, you can select to only see the birthplaces or only see the burial locations. These grouping options are automatic and also work with number ranges.

PROS: Simple interface for creating maps with many markers
CONS: Unable to manually add markers, though you can rearrange them

WordPress

The most popular way to host website can also display your excellent maps. WordPress allows you full control of the code that produces your website, and you can use any HTML when you create WordPress pages and blog posts.

HTML embeds, like both of those mentioned in the previous section, use an IFRAME to hold the contents of the map, similar to how YouTube videos are embedded. The frame references an entirely other site, but it’s made to seamlessly blend in to look like it belongs on the site. If you use a lot of custom CSS on your website (or use a WordPress theme that does) you may have issues with your map embed. Look out for “iframe” in the CSS file and double check that you aren’t forcing the width of the IFRAME larger than the available space available.

Alternatively, there are over 150 WordPress plugins for Google Maps. The use cases these plugins support varies. Some will only show a single place, while others let you build entire maps. If you have more than a few

Facebook

Unlike web properties that you control, the world’s largest social network does not allow for embedded HTML. That means you will not be able to have your interactive custom map on Facebook. However, you still have several options to get your location data in front of friends and fans through the use of image posts.

If you’d like your map to show up in the news feed, the size Facebook recommends Is 1200×900 (that is: 1,200 pixels wide and 900 pixels tall). At a minimum, look to maintain an aspect ratio of 4:3 with news feed images, where the image is 1/3 wider than tall.

There are a couple ways to generate the image for your Facebook post:

1.Take a screenshot: you can use the screenshot feature of your operating system or get software that lets you capture whatever is on your screen.
2.Automate with BatchGeo: BatchGeo Pro comes with high resolution, printable files in PDF and PNG. The latter is ready to go as the recommended format for Facebook posts.

Once you have your image, upload it to Facebook. Be sure to write a status that points back to your site or map.

Better yet, include the image in your HTML and Facebook will pick it up and include it automatically.

Twitter

Twitter is similar to its social media counterpart in many ways, yet there are also differences between the platforms. When it comes to interactive maps, the story is the same: no embedded HTML in tweets, so we need to use images.

The size specifications are a little different for Twitter. Here you’ll want to keep a 2:1 ratio (two times as wide as tall). The minimum size to show up in a user’s timeline is 440×220 (440 pixels wide, 220 pixels tall).

You can use the same methods as described in the Facebook section to make your Twitter images, too: manual screenshot or automatic with BatchGeo Pro. In addition, due to Twitter’s image format, another choice available is BatchGeo’s map badges.

These graphics provide a small preview of the map to give you a feel of what’s to come with the larger map.

There are two main ways to include images in your tweets:

  1. As an image attachment: include a direct link to the image or upload it to Twitter. Be sure to also include a link to your website or map so your followers can see the interactive version.
  2. As a Twitter card: If you have access to the full HTML of the site with your map embed, you can add special header meta tags to point to your image. That way, Twitter will include the image automatically, even when someone else tweets our your link.

For those extra-serious about their Twitter presence, you can even use special versions of these cards in the second example on Twitter’s ad platform.

Email

Email is a great way to re-engage an audience who is already interested in hearing from you. Once someone is reading your email, you need a way to capture their attention and likely encourage them to take some kind of action (like click to your website). A beautiful map sparks the kind of curiosity you want readers to feel in an email.

For a couple reasons, it’s probably best to borrow from social media and use images for emails, rather than depending on an interactive map:

  1. Since you likely want the reader to take an action in your email, you don’t want to give everything away before that happens. Let the image be the taste that leads to the full meal on your site.
  2. There are so many email clients that you can’t be certain how an interactive map would display. It might show up a different size, strangely positioned, or not at all. That’s the nature of email design.

For these reasons, both business and technical, it’s best to use an image when embedding a map in your email.

Google Slides

A previous version of Google Slides supported IFRAME embeds, but the current version does not. Unfortunately, that means you can no longer embed interactive maps in Google Slides. Instead, we recommend you use an image of a map. If you wish to have the feeling of an embedded map, you can record your screen and use an animated image in your presentation.

iPhone

Many websites include maps that are mobile-optimized. When you load them on your iPhone, you’ll be able to explore them as you might expect on a phone, with an experience slightly below desktop.

For easy and fast access to your maps on the iPhone, there’s BatchGeo Mobile. It provides a native experience and gives you direct access to any maps you’ve created.


Are you ready to easily create an embedded map? Try BatchGeo for free.