How to Embed Static Google Maps to your Website without Enabling Billing - with Code Example

Back in 2018 Google Maps rolled out pay-as-you-go pricing plan, where in order to use the maps on a website, you must first enable the maps API in the Google Cloud Console, then obtain an API key and use it with every Google Maps request. You are billed by default for all requests, but you do get a certain dollar amount of credits, so if your usage is low, you don’t actually end up having to pay for the service.

However, it is quite nerve racking to watch the billing charges accumulate in the console. Furthermore, to enable the API in the first place, you must create a billing account and give your credit card details to Google, so if you do go over, you will get charged.

There are several other maps platforms that offer solid alternatives if you are not impressed by this current Google pricing model. For example Mapbox and Apples Mapkit JS are strong candidates. However, these platforms have their own kinks and require more or less setup to get started. Given that Google Maps was free for years, it has the most advanced UI and features, and you may find these other platforms still lacking some of that polish.

If all you want to do is display a simple map with a single pin in the middle - without worrying about running charges, exceeding quotas, or selling out your soul - we will show you how!

You can embed google maps view to your website using an iframe. You can then apply all your web developer expertise to hack this iframe.

First let us consider the pros. When use use the iframe you do not need to…

  • enable the API
  • add a credit card or billing account
  • worry about exceeding quotas and your map becoming unavailable
  • worry about getting charged

The cons:

This hack only works if you want to display a single pin in a static way; if you need multiple pins or javascript manipulation, this is not the way to go.

Implementation

This is a basic example of how to embed a static map. Pay attention to the
querystring parameters:

z is zoom level; higher value will render closer up. Uses integer range 1-N.

q is the pair of coordinates for where to display the marker

ll is the pair of coordinates for centering the map - use this if you want to center the map without displaying a marker

t map mode: m – default, k – satellite, h – hybrid, p – terrain

output=embed required

1
2
3
4
5
6
<iframe 
src="//maps.google.com/maps?z=19&amp;ll=40.6892494,-74.0445004&amp;t=k&amp;output=embed"
width="100%"
height="900"
frameborder="0">
</iframe>

There is a much more exhaustive list of all map iframe parameters available here so we will not dig further into the various options. Use them to further hack your map frame.

By the way, if you are interested in using a different maps platform, check out our tutorial Getting started with Apple MapKitJS!


Happy Coding!

If you enjoyed this article please share it with your friends!

Mobile First