Skip to content
How to add Google Maps into WordPress

How to add Google Maps into WordPress

You are building a website and you want to provide an address so that customers can reach your office quickly and easily? Or you simply want to introduce readers to the tourist attractions you've been to, the shops or places you've visited. A location displayed on the map will help your website attract more than a written address. This article will show you how to insert Google Maps into your WordPress site.


Why do you need to insert Google Maps into WordPress?

A position displayed on the map will look much more eye-catching and professional than a regular address line. A site with built-in maps will give visitors easier access to your business location and locate the destinations you recommend.

The reason to use Google Map in WordPress:

  • Help visitors when visiting your site can easily locate your location.
  • No need to rely on a third website and still find an easy place.
  • Help you build a professional website with full features to help customers have the most intuitive view of your location.

How to insert Google Maps into WordPress

There are 2 ways to insert Google Maps into WordPress:

1. Embedding code directly from Google Maps

Look at detailed instructions at here.

Advantages: You don't need to install any plugin to display it on your WordPress site. You absolutely can do it manually.

Disadvantages: Embedding direct code often is often difficult for people who are not proficient in code.

2. Using plugin

There are many plugins that can be used to integrate Google Maps into WordPress such as WP Google Maps, Google Maps Bank, CP Google Maps, or Intergeo Maps. In this article, we will show you how to insert Google Maps into your WordPress site using the WP Google Maps plugin.

Log in to dashboard WordPress, click on Plugin, select Add New. Enter WP Google Maps on the search bar, then select Install Now.

insert Google Maps into WordPress

After downloading the plugin, to activate, click on the Activate button. A Map tab will appear on the dashboard bar, select that tab to display the plugin. To skip, you can select Skip intro and create a map.

WP Google Map

This plugin requires a Google API key, so enter the API key by clicking Create an API key now.

Google API key

To create a Google Key API, do the followings:

Step 1: Access the Google Maps Platform and click on Get Started.

Step 2: Activate this Platform

Select Maps, Routes, and Places and then click continue:

Google Maps Platform

Step 3: Create a project

Then, set up payment information.

Create a project

Step 4: Create API Credentials

Select Credentials in the API Manager menu in the left sidebar in the Google Maps Console Platform

API Manager

Step 5: Choose Create Credentials

Create Credentials

Step 6: API Google Key will show up on the screen.

API Google Key

Insert the Key API into the WP Google Maps plugin

Paste the API Key into the required plugin box.

 API Key into the required plugin box.

When the process is successful, continue to set up your map.

A sample map will be created in advance for you. To edit and use for your website, click on the Edit button under Maps. Select the platform to use is Google Map.

Select the platform to use is Google Maps.

Name your map, then adjust the length and width parameters. Usually, the default parameters are based on your website resolution is the best.

 adjust the length and width parameters

Next, go to the Markers section. The display position is displayed by typing the GPS coordinates.

go to the Markers section

Below the Address/GPS configuration is the Animation option, which allows you to add effects to your map, such as the Bounce effect.

After completing the settings, click select Save Marker to reload the page. Then continue to click the Save Map button to save the plugin.

So Google Maps has already been inserted into WordPress. Using an interactive map makes it easy for visitors to access your location, and it also helps your site look professional with the features of a contact page - referral right on your home page. After setting up, if your map can still show up properly with this error: "This Page Can’t Load Google Maps Correctly", don't worry, you can refer to this post to fix it easily.

In case that you have a listing page and you wish to display Google map for individual items on this page, read this post. And this post will let you know how to add more markers on your map.

Good luck.

Leave a Comment






Scroll To Top