How To: Google Maps API Key For Your Website

Google’s announcements make all web developers and marketing specialists sit up and take notice. This past June, the search engine giant announced that it would be changing how users would add Google Maps to their websites. Now, users need a Google Maps API key.

For now, existing Google Maps users won’t be affected – the maps currently being displayed on websites will still function properly. However, users should be prepared for any changes to this fact in the near future.

For those who need to add a map for the first time, an API Key is needed. Here are some steps to take to get a Google Maps API key for your website.

Getting Your Google Maps API Key

There are a few APIs that are supported by Google Developers. A Google Maps JavaScript API key is what is now needed to show maps. The first step is to get the Google Maps API key.

But before you can do that, you will need a Google account. Once you’ve set yourself up (or already have one), log into Google, go to the Google Maps Javascript API page, scroll down the page, then click the “Get a Key” button.

A lightbox will open, and at the top, you can name your project. You will have to agree with Google’s terms of service in order to move on, then click Create and Enable API. Google will then generate your Google Maps API key. Be sure to copy it and save it in a safe place for later.

Protect Your Google Maps API Key

The next step is to enhance the security of the app. Click the “Go to Console” button right under your API key which will open a new window. This screen will allow you to restrict the use of your API to only your website, which means that no unauthorized user will be able to access your API key and use it on their website. On the window that Google just opened, you will find the Key restriction section.

To display maps on your WordPress website, choose the HTTP referrers option which will open a new field where you will add your domain name. Make sure you add it in the necessary format: *.yourwebsite.com/*

Everything needs to be formatted precisely this way with the asterisks and all. In order to add multiple domains, they need to be added one line at a time.

Click the “Save” button when you’re done. You will need to wait a few minutes for the changes to take place, then you can use your API key to add Google Maps to your site.

Adding Maps to Your Divi Website with Your New Google Maps API Key

Now you can add the maps to your site. For Divi users, this is really easy. Simply go to Divi > Theme Options. In the General tab, scroll down to the Google Maps API field. Paste your Google Maps API key in the space given, then click “Save Changes.”

A green tick icon will be displayed showing that your API key is accepted. You can then add Google Maps to your site.

To add maps to a Divi website, open the WordPress visual editor by going to Posts > Add New, then click the “Use The Divi Builder” button. Insert a column or row, then click “Insert Modules.”

Choose “Map” from the list of modules. Now you can start configuring your maps. Begin by specifying the centre point for the map, then drop as many pins as you want on the map by clicking the “New Pin” button. A physical location for each pin will need to be specified.

When a user hovers over a pin on Divi maps, it will open a small infobox with more details. You can also populate this information yourself. You can even choose an image from your media library to attach to the pin.

Save it when you’re done with a certain pin, which will take you back to the main map screen with more settings to configure.

Click “Save & Exit.”

Now you can publish your post with an awesome-looking map!