Posted on

Free Google Map

map with pins in

Google has now started charging, or at the least taking credit card details, in order to let you use their API key to add their maps to your site. You can read more about that here in this useful blog post from High Rise Digital. It’s still possible to add a google map for free, however…

This method requires no plugin. You don’t even need to lodge your credit card details with google, let alone pay anything.

Video guide on adding free google map

I’ve done a short video talking you through how to do this (with additional step-by-step instructions below if you prefer to avoid video):

Steps to take

  1. search for the place you want to create a map for on Google maps. Use post code/ zip code or name of the venue to find it.
  2. click on the ‘share’ icon:
screen grab showing google map with 'share button' circled

3. click on ’embed a map’:

google map with 'embed a map' tab in 'share pop up' highlighted

4. The map will appear in a preview pane, with a load of html above it. Click on the ‘copy html’ link:

The 'copy html' feature in google map's embedding/share feature highlighted

5. Copy the html and go to the page where you want to embed the map. Create a ‘custom html’ Gutenberg block in the place you want the map to appear:

screen grab showing custom html block in WordPress/Gutenberg highlighted

Please note – blocks appear in the list of blocks in a different order on different WordPress installations, according to which blocks are most frequently used on that site. You may not find the ‘custom html’ block in the same place on yours. To find it quickly simply type ‘custom’ into the search field where it says ‘search for a block’.

6. Paste that html to the custom html block:

screen grab showing html from google maps pasted into custom html block, gutenberg

7. Take a look at it on the preview tab of the html block:

preview of embedded map in WordPress editor

8. If it all looks fine, update your whole page and view the front end to double check it looks right.

There’s one strange thing that I’ve shown in the video but not in the steps outlined above. Sometimes, when you click on ’embed’ in google maps, it gives a map of the world instead of the map of your location. I have no idea why that happens. You can get around this by refreshing that map page and then starting at step 2 above.