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
- 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.
- click on the ‘share’ icon:
3. click on ’embed a map’:
4. The map will appear in a preview pane, with a load of html above it. Click on the ‘copy html’ link:
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:
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:
7. Take a look at it on the preview tab of the html block:
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.
