Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

Integrate Google maps in website with ZeGuten


I work as a copywriter at Gutenix. Our company creates products based on the Gutenberg WordPress editor.

Responsive‌ ‌image‌ ‌carousel‌ ‌in‌ ‌Gutenberg‌ ‌using‌ ‌ZeGuten‌ ‌block‌
Prew post
  • May 25, 2020
  • 3 min read
  • 163

Integrate Google maps in website with ZeGuten

Google maps are frequently used on different websites. Business owners often integrate Google maps in website to display the location of the main offices or stores, etc. Using ZeGuten Advanced map block you can add to your pages different maps layouts and attune them according to your needs and page design. 

From this article, you will learn about how to create your own Google Map API to start using Advanced Map block and successfully integrate Google maps in website.

Creating Google Map API

First, visit the Google Maps Platform website and sign in your Google account to continue the next steps. After, you have signed in click on the Get started button.

In the appeared window choose your country and check the box opposite the Terms of Service. Then click on the Continue link.

In the second step fill the necessary data in the fields. Choose your account type, enter your name, type your address, and postal code.

Then cross to the payment method fields. Enter the card number and cardholder name. It is necessary for registration. The money from your card won’t be deducted without your agreement.

When the home page opened, click on the three-line button in the top left corner. Find    APIs & Sevices tab and cross to the Library.

In the Map section click on “View All”. Find the Geocoding API there and click on it. When its opened click on Enable button to switch it on.

When the Geocoding API was on go to the APIs tab and in the Additional APIs find Maps JavaScript API. Click on it and enable.

Go to the Credentials tab and click on the Credentials in APIs & Services link. In the appeared window click on Restrict Key to continue.

In the Application restrictions section transfer the value from None to the HTTP referrers. In the API restrictions section switch over Restrict key. Then select the match Maps JavaSCript API and Geocoding API values in the dropdown list. Save the changes.

So you have successfully created your API key. Copy it to paste in WordPress.

Integrate Google Maps in website

Open the WordPress Dashboard. Find ZeGuten section. Paste the created API key in the Google Maps API key field and save the changes. The work is done.

How to use ZeGuten Uneven posts layout
Next post
Responsive‌ ‌image‌ ‌carousel‌ ‌in‌ ‌Gutenberg‌ ‌using‌ ‌ZeGuten‌ ‌block‌
Prew post
How to use ZeGuten Uneven posts layout
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.