Hands On

Migrating from Google Static Maps

By Raymond Camden | 27 February 2020

Users of Google Static Maps may be interested in trying out our static map solution, the HERE Map Image API. Both services support a similar idea, creating static map images that can be used on the web, email, and other devices. In this post I'll give a bit of background on both and then give comparative examples of how to build the same solution in both products. 

Getting Started

As this guide is primarily about moving from Google's service, I want to start off with a quick overview of how a developer would get started with both solutions. 

For Google's Static Map API, you can begin at the Overview. You will be required to have an account with Google and a project setup in order to create a key to use with your requests. 

For pricing (as of January 2020), you pay 0.002 cents per use up to 100,000 calls per month. However Google has a 200 dollar monthly credit for qualifying accounts. You can get more details on their pricing page. 

For HERE's Map Image API, you can start learning more at our Introduction page. You will need an account but will not need to provide a credit card to use the API. 

As of January 2020, our pricing information specifies a free tier allowing for 250,000 calls per month. Comparing that to Google, your cost would be $300 after the $200 dollar monthly credit is applied. 

Feature Overview

Roughly speaking, here's a feature breakdown between the two platforms. Let's start with what both platforms share in common.

  • The ability to specify a map's location based on latitude and longitude.
  • The ability to specify image size, zoom level and image file type.
  • The ability to pass a text version of an address.
  • The ability to use different map types (default, satellite, etc).
  • The ability to add markers.

In terms of features that the HERE Map Image API has that Google does not:

  • The ability to show routing information. Google's API can draw straight lines from one point to another, but not "routes" (ie how a person would actually drive/walk/etc from one point to another).
  • The ability to show numerical information on the map via heatmap style graphics and simple bar charts.
  • The ability to draw "regions" on a map with customized styling.
  • The ability to get road sign images and company logos.

"Hello World" with Map Images

Here's an example of the simplest possible map for both platforms. Given a location of 30.22,-92.02, how would you construct maps for both products? 

Here's the Google URL: https://maps.googleapis.com/maps/api/staticmap?center=30.22,-92.02&zoom=12&size=400x400&key=MYKEY

I specified the center, zoom, and size attributes. Technically zoom wasn't required but it defaults to the planet which is not very helpful. Here's the result:

gm1

Here's the URL with HERE's Map Image API:

https://image.maps.ls.hereapi.com/mia/1.6/mapview?apiKey=MYKEY&c=30.22,-92.02

The center point is passed via the c attribute. Height, width, and zoom can be left out and defaults are used. Here's the result:

h1

To make it closer to Google's version, you can add values for height, width, zoom, and format:

https://image.maps.ls.hereapi.com/mia/1.6/mapview?apiKey=MYKEY&c=30.22,-92.02&w=400&h=400&z=12&f=0

Which results in:

mapview1

So to boil it down, you would make the following changes:

  • Change size=widthXheight to two parameters, w and h
  • Change the center=lat,lon parameter to c=lat,lon
  • Use the format attribute (f) to specify 0 for PNG values. (Our default, 1, returns JPGs.)

Some Examples

Now that you've seen a basic example, let's look at a few examples that cover some real world scenarios. We just demonstrated how to center a map based on a longitude and latitude pair of values. How about placing markers? Let's consider three markers at positions:

  • 30.19,-91.98
  • 30.17,-92.03
  • 30.21,-92.03

For each marker we will label them A, B and C and use a red color. 

For Google, markers can be defined a few different ways depending on whether or not you need marker-specific styles. While our style is consistent for each marker (just use the color red), the label changes for each which means we can't go with one style declaration for all. Instead I specify one markers attribute for all three markers. Here is how the URL looks with line breaks for added readability.

https://maps.googleapis.com/maps/api/staticmap?
center=30.22,-92.02&zoom=12&size=400x400
&markers=color:red%7Clabel:A%7C30.19,-91.98
&markers=color:red%7Clabel:B%7C30.17,-92.03
&markers=color:red%7Clabel:C%7C30.21,-92.03
&key=MYKEY

In the URL above, %7C is the URL encoded version of the pipe character. Each marker defines a color, label, and position as the last character. Here's the result:

gm2

HERE Map Images also support "per" marker styles but we can specify an attribute, poitxs, to signify automatic labeling based on letters. The default value, 0, would output numbers (1, 2, 3 and so on). Specifying 1 means to use letters (A, B, C and so on). We can also specify the color once using poifc. Here's the final URL:

https://image.maps.ls.hereapi.com/mia/1.6/mapview?apiKey=MYKEY
&c=30.22,-92.02&w=400&h=400&z=12&f=0
&poi=30.19,-91.98,30.17,-92.03,30.21,-92.03
&poilbl=1&poitxs=18&poifc=ff0000

Notice that markers are defined by the poi attribute in a list where the first element is the first latitude and the second element is the first longitude. This continues in pairs such that the third item is the second latitude and the fifth item is the third. Finally, I specified poitxs=18 to set a size that is a bit closer to the Google version. The default is a bit smaller.

mapview2

Now let's consider another example - presenting a map based on a text-based address. For Google, this is done by replacing the latitude and longitude values in the center attribute with an address. For example:

https://maps.googleapis.com/maps/api/staticmap?
center=200%20Terminal%20Dr,%20Lafayette,%20LA%2070508
&zoom=12&size=400x400
&key=MYKEY

For HERE, you have to be slightly more specific and specific attributes for the search. The more you specify, the more precise. Here's the same search using HERE's API:

https://image.maps.ls.hereapi.com/mia/1.6/mapview?
apiKey=MYKEY
&n=200
&s=Terminal%20Dr
&ci=Lafayette
&zi=70508
&w=400&h=400&z=12

In the example above, n stands for the street number, s the street, ci the city and zi the zip code. If you don't have your address information ready to send like this, you can use our Geocoder API to convert the address. (And I've already filed a ticket internally to expose this option to the Map Image API!)

Routing with the Map Image API

As a final example, let's look at something you can't do with the Google Maps API, rendering a route. While there's multiple options you can use (see the routing API docs for more information), the simplest version is to pass in the beginning and ending locations via waypoint attributes. So for example:

https://image.maps.ls.hereapi.com/mia/1.6/routing?apiKey=MYKEY
&w=400&h=400&f=0
&waypoint0=30.22,-92.02
&waypoint1=34.22,-91.02

waypoint0 represents the first location and waypoint1 represents the final one. You can provide more waypoints and the service will route from one to another. Here's how it looks.

routing

Again, remember that this is the simplest example with no customization of styles.

Learn More

I hope this helps you understand the power of our Map Image API. You should also check out the Guide and the full set of interactive examples.