New Google Maps API Tutorial

INTRODUCTION

On June 11, 2018, Google began requiring an API key and a Google Cloud Platform billing account to access its core products, including Google Maps. If you have, say, a Google map on your website showing the location of your business, it suddenly was replaced with a message that said, “This page can’t load Google Maps correctly.”

Google’s motive is financial. Your Google Cloud Platform account includes a $200 monthly credit on usage for the products. According to Google’s pricing table, that equates to 100,000 monthly static map loads, 28,000 monthly dynamic map loads, 28,000 panoramic static street views or 14,000 monthly panoramic dynamic street views.

Here’s how to obtain an API key for Google Maps and link it to your website.

HOW TO SET UP GOOGLE CLOUD PLATFORM ACCOUNT

Go to cloud.google.com/maps-platform/ and click on “Get Started.” Depending on your map needs, choose one or more of the following choices that appear:

  • Maps: This is for showing your location (roadmap, satellite, hybrid or terrain).
  • Routes: This is for showing directions to your location.
  • Places: This is for providing more detail, such as ratings, about your location.

Now select “Create a new project” and type in a name. Finally, fill in the fields for your billing information. Note: you are required to have a credit card on file to use Google Maps.

You will now see a message box that says, “You’re all set! You’re ready to start developing!” with your newly generated Google API key below.

HOW TO OBTAIN, SECURE AND INSTALL GOOGLE API KEY

In case you didn’t copy the Google API key before you hit “Done,” click on the menu icon next to “Google Cloud Platform” on the top left and choose “APIs & Services,” then “Credentials.” You’ll see the key for the project you created. To select other projects, click on the drop-down arrow next to your project name.

At this point, you should secure your API key to prevent unauthorized use, because you don’t want to pay for charges you didn’t incur. Next to your API key, click the pencil icon to edit it. Under “Application restrictions,” choose how your API key is accessed. For example, if you’re showing a map on your website, pick “HTTP referrers,” then type your website URL below. Now only your website may use this key.

You’ll now implement your key in one of several ways, likely one of these two methods:

  • Manual code. Replace the API key in your website code, in this line: src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”
  • WordPress plugin: Your plugin must have a setting in which you can enter your new API key. For example, on WP Google Map, go to “Settings,” then “Advanced.”

FOR MORE INFORMATION