Navigating the Process of Adding Maps to WordPress

At some point, you might want to have a map on your WordPress site, and whatever the reason might be – Maybe you’d like to direct people to your address, or you’re selling a product that needs maintenance so you’d like them to be able to locate your service locations – adding a map is pretty simple.

A Google Map can be added to your website manually, or you can use a plugin – in this guide, we’ll be looking at manually adding the Map.

Do We Need to Purchase an API?

If you ever decide to go the plugin route with Google Maps, an API Key is absolutely essential, and it has even been made mandatory since 2018.

And using the API key doesn’t have to cost anything at all if you aren’t making a whole lot of requests. The pricing table should help you figure out what expenses (for your purposes) you’re looking at here.

Google does regularly credit you $200 on your account every month and that should cover any costs you incur within a reasonable number of requests.

Procuring an API Key

Firstly, we’ll create an account on the Google Cloud Platform Console, and then proceed to create or select a project, and the steps are fairly intuitive and guided. Next, we’ll set up the billing part. Remember, your charges will be effectively zero as long as your site doesn’t blow up and you have lots of people making map requests.

After this, you’ll be prompted to choose products – which will display a variety of maps. As we’ll be looking at manually adding a map in your website, we’ll pick the ‘Maps Embed API’ option, and select ‘Enable’.

We now find ourselves in the APIs & Services screen. You can see all the API keys you’ve created on this screen, and you can obtain them from here at any point. Select ‘Credentials’, then choose ‘Create Credentials’. This generates your API Key.

One thing needs to be said, however – this API key will be visible in plaintext in the source code, so anyone could theoretically take the key and use it, thus causing your usage to spike abnormally and expensively. To prevent this from happening, you can tap on the API Key name and set up ‘restrictions’. Add in your WordPress referrer link, and limit the usage of your key to just your own site.

Embedding the Map

This is the no-plugin method of adding a map to your website.

You can add the exact location of the place you’d like to represent, or even display business information about that location, with the assistance of Google Maps and the API Key.

Pick a basic map of any part of the world, preferably the one you want to show – let’s assume you want to show the Eiffel tower, for example. Head on over to Google Maps and search for the general area of Paris city, then zoom into the map location of the tower to the extent you want to.

Next, click on the three horizontal lines at the top left (hamburger menu), and from the dropdown menu, select ‘Share or embed map’. This will present you with options to share a link or embed the map, and you can even use this screen to size the map to your liking, and which suit the purposes of your website.

The HTML thus generated is available for you to copy and paste, and you can embed the code into any part of your WordPress website.

Follow these instructions and your map should now show up at the intended spot on your page, post or widget!

More on The Topic

• How PHP Powers Enterprise WordPress Development for Scalable and Custom Solutions
• Why WordPress and Next.js Integration is the Future of Enterprise Websites
• WordPress for Advanced Business Applications: Integration and Customization Insights
• WordPress as a Transformation Tool for Enterprise Digital Platforms
• WordPress Solutions for Multi-Faceted Enterprise Challenges