AvoidErrors
  • HOME
  • WINDOWS
  • APPLE
  • MS OFFICE
  • RASPBERRY PI
  • WORDPRESS
  • TECH TIPS
  • LINUX
  • VIRTUALIZATION
  • FORUM
No Result
View All Result
AvoidErrors
No Result
View All Result

Add Google Maps on WordPress Using a Free Plugin

Abdelrahman Reda by Abdelrahman Reda
October 12, 2018
in WordPress
0
Share on FacebookShare on Reddit
RECOMMENDED: Transfer Windows and Installed Data to Another Hard Drive

Although you can add a map manually on WordPress without a plugin, the result is a simple map with limited customization options. Many free and paid plugins enable Google maps on WordPress websites. 

In this step by step tutorial, I will be walking you through how to use a very popular and user-friendly plugin known as ‘WP Google Maps’.

Log in to your dashboard and add a new plugin. Search for ‘Google Maps’ then install and activate the plugin below.

When the welcome page pops up, click on ‘Skip the intro and create a map’ button.

In this step, we are going to get a Google map JavaScript API key. This step is common for all plugins that offer Google map integration. We need the key to solve the persistent notification below.

You will need to click on the ‘Create an API key now’ link. You will be redirected you to the Google Developers website. You will then need to select a project or create a project if it’s your first encounter with Google developer.

On the project dashboard page, click on the ‘ENABLE APIS AND SERVICES’ button.

Search for ‘maps JavaScript’ and click on the first result.

Enable the Maps JavaScript API.

Under the ‘Credentials’ tab at the top, create a new API key credential.

Copy the generated API key and restrict the API key’s usage.

In the Application restriction, Select ‘HTTP referrers’ and input your domain in the following syntax:

https://www.avoiderrors.com/*

https://avoiderrors.com/*

Switch to the API restrictions tab and select ‘Maps JavaScript API’ on the drop-down menu and SAVE.

Head back to your WordPress dashboard, paste your API key and save changes as shown below.

If everything went fine, you would see the message.

In this final step, we are going to set up a simple map. For this step, you need to get longitude and latitude coordinates of the location you intend to show on your map.

Go to latlong.net a look up your location’s coordinates and keep the browser tab open.

On another tab, go back to your dashboard and click on the Maps tab on the bottom left side.

Edit the default map that is automatically generated by WP Google Maps.

There are many customizable options available below. Most of them are very straightforward. In my case, I increased the zoom level to improve the effectiveness of the map to the customers

Note: There is no harm when you tweak these settings, remember to Save Map when done.

Click on the button shown below to add your preferred location’s coordinates.

Fetch the coordinates we had fetched earlier and paste them here.

Save the map then copy the map’s shortcode and paste it on a new page as shown below.

Finally, publish the page and preview changes to see your map.

Previous Post

How to fix “Theme installation failed” WordPress Error?

Next Post

How to Access and Read Dump files Using Blue Screen View

Abdelrahman Reda

Abdelrahman Reda

Abdelrahman Reda is a Motivated Support Engineer with 6+ years of corporate and consumer support experience. His experience related to administration of Network, NOC support, computers and anti-virus server, data entry, networking sites, remote support.

Related Posts

How to Install a WordPress Plugin
WordPress

How to Install a WordPress Plugin

by Muhammad Imran Habib
October 18, 2021
How to Install a WordPress Theme
WordPress

How to Install a WordPress Theme

by Muhammad Imran Habib
October 18, 2021

Subscribe to get weekly tutorials direct to your inbox!

Windows

Fix .net Framework 3.5 Missing on Windows 11

by Rhousse
August 13, 2022
Clean Install Windows 11 Without USB
Windows

How to turn off Delivery Optimization on Windows 11

by Muhammad Imran Habib
August 13, 2022
How to Enable Dark Mode on Windows 11
Windows

How to Prevent Users from Changing Proxy Settings in Windows 11

by Muhammad Imran Habib
August 13, 2022
How to Check Laptop Battery Details in Windows 10
Windows

How to Create a New Custom Power Plan in Windows 11

by Muhammad Imran Habib
August 13, 2022
  • Disclaimer & Privacy Policy
  • FAQ
© 2022 Powered by Cloudways
No Result
View All Result
  • HOME
  • WINDOWS
  • APPLE
  • MS OFFICE
  • RASPBERRY PI
  • WORDPRESS
  • TECH TIPS
  • LINUX
  • VIRTUALIZATION
  • FORUM

© 2022 AvoidErrors Powered by Cloudways | Privacy

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.