Yesterday, I was making a simple HTML & CSS basic webpage. In that page, I needed to embed a map - like you'd embed a Youtube video.
My first choice was (of course, you guessed it!) Google Maps.
I thought it would be super easy, like a Youtube video! You only need to push the share icon, right?
Nope. I was super wrong.
First of all, you need an API key.
These days, API and API keys are normal. No big deal. Just register
and get an API key.
So what’s the big problem?
The main and big problem with Google maps is the pricing. Just a year ago (June 11th, 2018), google changed its politics about pricing, and the new model is pay-as-you-go.
“Pricing for our core products is pay-as-you-go and you only pay for what you use. You also get a recurring $200 credit on your billing account each month to offset your usage costs, and you can set usage limits to protect against unexpected cost increases. You can understand your current API usage in the Google Cloud Platform console, and estimate your monthly bill with the pricing calculator, and visit Google Maps Platform Billing.”
This new model is a freemium model.
In other words, every API call generates a cost. That's why you need to register for an API key and provide Google billing details even if you only need to embed a map and that is “also” free.
Why embedding a map is "also" free?
Google gives you $200 free credit every month, with $200 free credit you can:
That means if I only want to embed a map with a simple marker showing a place I don't have to pay at all. But If I want to use the embedded API for directions, views, or search mode, I need to pay, even if my payment is under $200.
I need to pay with my “free credit” (see the second column) but it can also be very expensive. Callahan Williams (Front End Developer) shares the following:
“If you update the map with any new location details, that counts as a separate call. So if you’ve got something that loads a map, alongside an address search using auto-complete, and provide geolocation services for directions or distances; that’s three separate API calls on page load. Auto-complete makes a call for every letter typed in the search bar and again when you select a location; then when you add directions to the nearest location, that’s another.”
Is there another option?
Yes! If you want to stop using Google maps, OpenStreetmap is for you.
OpenStreetmap is a free, editable map of the whole world that is being built by volunteers - largely from scratch - and released with an open-content license. It also include a lot of libraries to work with.
Embedding a map in OpenStreetMap is super easy. You just need to go to https://www.openstreetmap.org/ , search a place, and click on the share button - yes, like a youtube video, yay!
You can also edit basic information on your map; you can export it to an image or embed it to your website.
You can start using OpenStreetMap, and join to the community here.