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:
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:
Now, copy the iframe tag:
Step: 3
Now, it's time to paste the tag into a WordPress page or post:
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.
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:
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:
Now, select “Public on the web” and save the changes:
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:
After that, you will get an HTML tag (usually an iframe tag). Copy the iframe tag:
Step: 3
Paste the tag on any page of your WordPress website:
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:
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.
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:
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. 🙂