What happened to Google Maps?

Since 11th of June 2018 Google is now charging everyone for their Google Maps service. For now, everyone also gets 200$ credit/month to be used for these services, so if you are not exceeding that, you should be fine and your money is safe. Regardless of the situation though, you still need to enter your credit card details for the Maps API to work with your API key.

That situation can of course change (I’ve read somewhere that in July 2019 the 200$ credit might be revoked, but cannot confirm 100%) and it will probably change for worse than for better, but… fingers crossed, maybe Google will follow the footsteps of Amazon Web Services (AWS) and will charge less and less for their services? Who knows? ;)

Summarising, at the moment:

If you are using their Google Maps API and you have huge traffic ( worth over $200 ) you pay!

If you are using more advanced features like Styled Maps, Street View, and/or Geolocation — you pay even more!

More details about Google Maps pricing can be found here.

Available Alternatives

I know, you just started thinking… what about other map services available on the market? How do they compare to Google’s offering? Hmmm… the competition is there, they have good maps too, but.. you will end up in the same situation (more or less). Maybe this will change, if Google is going to stop providing the 200$ bonus, but as for now the competition has quite similar offerings:

Apple MapKit JS

This is a JavaScript library which allows you to use Apple Maps on your website. As of this writing, they have free daily limit of 250k map views and 25k service calls (which is a lot), but it’s difficult to find out more about their pricing model in general and their API is still in beta.

Link to a MapKit JS.

Bing Maps

The Microsoft’s offering in a maps market is similar to Google, but having a simpler pricing scheme. You can make 125k free calls a year to their API. This is not much, but should be good enough for smaller websites.

Link to Bing Maps.

OpenStreetMap

This is the subject of this blog post, it is free to some extent. What people behind OSM mean by that, is that the data is free, but serving the data might be not. If you have a small website without much traffic, you will most probably be fine, and you can use it freely. However, if you are going to generate a large traffic you can be cut off and in such a case you should serve the data from your own infrastructure (the method which I will describe below).

API usage policy can be found here.

How OpenStreetMap works

If you decide to move onto using OpenStreetMap, you have two options:

you can use maps directly from their server

you can set up your own tile server in-house

I’m not going to talk here about the first option, you can find some information about using OpenStreetMap directly with a JavaScript library in the ‘Setting up your JavaScript library of choice’ section. Further down are the instructions on how to set up the tile server yourself.

Now the main question: is the OpenStreetMap solution free? Well, in a sense yes, cause the data you use is freely available, but at the end of the day you need to pay somehow for the server resources you use to serve that data. On top of that you need to add the cost of maintaining the server, especially if you want your maps to be up to date.

Setting up an in-house OpenStreetMap server

If none of the free alternatives works for you, you can still run your own map tiles server. Due to the fact that one of the tile servers is available as a Docker image, thanks to a guy named Alexander Overvoorde, the whole process is pretty easy.

Most of the information about setting up the Docker image is listed on the project page on a Github site.

You will need two Docker volumes for storing your OpenStreetMap data, as well as the tiles previously requested by your services (storing previously rendered tiles on a separate volume will save your data between container restarts):

Also, you need to download the tiles, you need them in the *.osm.pbf format. You can find them on the geofabric.de webpage.

Download the tiles for the region you are interested in, and import them into a Postgres database:

For the purposes of this tutorial I’m going to use data for Malta which is only 3.8 MB. If you don’t have the overv/openstreetmap-tile-server:latest image that operation can take quite a bit.

After the import finishes, you can start up your own tile server:

where openstreetmap-rendered-tiles is the volume for already rendered tiles and openstreetmap-data is the volume storing the postgresql database.

To check if the server is working properly you should try to access any tile available for the data set you use. To find out the proper x,y,z values, the easiest way would be to go to the original openstreetmap.org, find Malta and in your browser developer console find the tile addresses while they are downloading, eg. I’ve picked one which looks like this:

https://b.tile.openstreetmap.org/12/2213/1610.png

While loading this web address.

To find out the same tile on your personal map tile server, you would need to go to the same location here, assuming you have run the example on port 80.

Setting up your JavaScript library of choice

There are multiple options to choose from when it comes to picking up the JavaScript library most suitable for your needs. One of the most popular solutions is LeafletJS which, apparently, you can also use with ReactJS.

Another one working with ReactJS is the Pigeon Maps component, available here.

Both of them are easily modifiable to make them use your own tile map server.

Leaflet Maps

Download leaflet with ReactJS here and execute the following commands to build and start the demo application:

Now, to use your own tile server change the TileLayer component to use the url to your own solution:

After the changes are implemented and you refresh the browser, you should see the new map created with the tiles from your server. If you have downloaded tiles for only a specific area (like I did for Malta) you will not be able to see any details of other areas. If your map was centered somewhere else, you would need to scroll the map to find the region for which you have downloaded the maps. After that all works perfectly fine.

Pigeon Maps

Download from here. Go to demo folder and execute the following commands:

Once all is installed and the server is started, you can access the page at localhost:4040

Now, to change the Pigeon Maps component to use your own tile map server, you need to change the following in demo.js file:

to:

Similar to the Leaflet Maps, if you downloaded the data just for some specific area, you would need to find it first on the globe, once located, you can browse and see much more detailed tiles.

As you can see, setting up your own map tiles server is not difficult and if you have an infrastructure to run docker containers, its pretty quick and easy. If you decide to go this route, please remember to update your map data every once in a while.