Back in the days, to go to a new destination where we had never been, we often had to ask for help from someone to get there. However, with the availability of the internet and Google maps, it has become much easier for us to locate a place on the mobile or computer screen and get there without seeking help from others.

Today in this article, we will show you how to add google maps in WordPress for any place that you would like to showcase on your site. Now, let's get straight to the tutorial.

Add google maps to WordPress site in three ways

Supposing that, you are going to organize an event at a particular location and you want to show this location to all of your website visitors. To do so, you have to add the location to your WordPress site with the help of the Google map service.

There are three ways to do add your location –

Embedding a Google map
Using JavaScript API key
Using WordPress plugins

1. How to embed a Google map

Step: 1

Go to your browser and type in “www.maps.google.com”. After logging in you will see the following screen:

add google maps in WordPress

Now, search for the location in which you want to organize your event. For example, you want to organize your event at “Fresno City College theatre“. Next, you need to copy and paste the name “Fresno City College theatre” in the search field indicated by a red mark. After that hit the enter button to see the location on the map:

This is the map that you want to add on your WordPress site.

Step: 2

Select the “Share” option as demonstrated in the screenshot below:

The following options will pop up on the screen:

Click on the “Embed a map” option:

Embed a map

Now, copy the iframe tag:

add google maps in WordPress

Step: 3

Now, it's time to paste the tag into a WordPress page or post:

WordPress page

After that, you can save this as a draft or publish it immediately.

Note that, when hitting the “Save Draft” button or “Publish” button the code may change into a working WordPress shortcode.

test page

How will the map appear from the front end?

If you hit the “Preview” button, the map will look much like this from the front end of your website:

add google maps in WordPress Another good thing is that if your users scroll their mouse on the map, they will also get options to zoom in or out the map using the “Ctrl” button and the “Scroll” of the mouse:

zoom the map

This is how you can add google maps on your website.

Embedding a custom map

What if you want to add a place or location that is not mentioned on Google map? Not to worry! Google map will allow you to create your own map. Here's how:

Step: 1

First off go to My Maps. Here, you can select your existing maps or you can also create a brand new map at your disposal.

If you do have a map created all along, you must change the privacy of the map to ‘Public‘ in order to make the map visible to your visitors. To do so, click on the ‘Share‘ button:

Next, select the “Change” option:

add google maps in WordPress

Now, select “Public on the web” and save the changes:

Public on the web

Next, click on the ‘Done‘ button:

Step: 2

Click on the “Map Action Menu or More Icon (looks like three vertical dots)“:

Now, select “Embed on my site” from the menu items:

add google maps in WordPress

After that, you will get an HTML tag (usually an iframe tag). Copy the iframe tag:

add google maps in WordPress

Step: 3

Paste the tag on any page of your WordPress website:

add google maps in WordPress

You can save it as a draft or publish the map any time you want.

How will your visitors see the custom map from the frontend?

If you hit the preview button then you will be able to view the map from the front end of your website. Here's how your visitors will see your custom made map:

custom map from the frontend

This is how you can add your custom made maps on your WordPress site.

Adding Google maps on WordPress site with full control (using JavaScript API) – for advanced users

If you want to show your location on a post or on a particular page, you can also do it by simply using Javascript APIs.

Now what you need to do is copy and paste the following code in the Post or Page:

https://gist.github.com/suzauddowla/581a2d207a145ab4f98ae1802cd26a36

To do it, you can go to WP Admin Dashboard → Add New Post / Page.

add google maps in WordPress

How to control your map using the code?

To use the code for your purpose, make sure to enter your free Google map API key.
you will need to change the latitude (lat) and longitude (lng) values. You will get this value from the google map very easily.
You can change the height of your map by changing the style.
You can also adjust the zoom level by changing its value. For example, setting the value to 16 will zoom in more than setting the value to 8.

Frontend view

Here's how your visitors will see your map from frontend:

map frontend view

Adding Google map using WordPress plugins

To add google maps you can also install free WordPress plugins like –

Usually, the plugins require your Google Maps API key when adding your location.

Over to you

If you do face anything challenging while adding your maps on your WordPress website, don't hesitate to let us know in the comment section. We will try our best to help you. Good luck. 🙂

Tag Archives: embedding google-maps-on-wordpress

How to Add Google Maps in WordPress Website