Do you want to know how to add Google map in WordPress contact page or other pages, posts or widgets AND knowing many options Google maps gives you? It is SUPER easy!
I will show you how I did add or embed Google maps to WordPress, with many additional tips to alter them. This method will also work with non-WordPress websites.
WordPress Google Maps Preparation
In this tutorial, I am using WordPress 4.7 version and Twenty Seventeen child theme, read or watch the video how to do this on my previous tutorial here.
I also use Chrome browser. Firefox will work too. If you use another browser, no problem, just adjust the width of the content area with 740 px for the width.
Our method will also work with any version of WP and any themes. If you don’t use WordPress Twenty Seventeen theme, skip to the embedding tutorial.
I wanted to add Google map in WordPress Contact page without a Google Maps plugin.
Because Twenty Seventeen has Theme Options that allow me to choose a Single Column in a static page, I set up my Contact page first to be a single column page first. This will change the appearance of my Contact page – The page title will be on the top of the content area. If you are interested on another tutorial about Twenty Seventeen theme, you can check my other tutorial how to edit Twenty Seventeen footer text.
To do that, open your “Customizer” by clicking “Customize” button in the Admin toolbar on the top of your page. (while you are logged in as Admin)
Then click Theme Options.
Click on “One Column” checkbox. Hit Save & Publish button and close your Customizer.
Now, I am almost ready for my map.
I want to know the exact width of my content area of the Contact page.
To check this, by using Chrome browser, in your Contact page, right click somewhere and select on “Inspect Element”. Click on Inspector button and hover on content area, you will see the width. It is 740 px max. Alternatively, you can check 2017 theme codex.
If you use another theme, you may want to check your theme’s description to find the width.
But you can use “Inspect Element” to be fast and work with all themes.
How To Add Google Map in WordPress
We will learn how to add Google maps to WordPress using 3 methods, with one destination, direction, and using Google Street View pictures.
We will use a page, but you can also use a post or your widget. The method is just the same, you can post the code to any places you want in your WP website, as long as it supports HTML.
Adding Google Maps to WordPress With Only One Destination
You can login to your Google account. But without logging in will also work.
1. In Google maps web page, type the destination address.
It will show you the red sort of balloon icon for the destination.
2. Click “Share” icon in the left sidebar (See below screenshot).
Alternatively, you can click on menu icon on the top, and select “embed or share map” link.
To me, clicking share button is the quickest and faster since you see the button right away after typing your destination.
3. Click “Embed map” Tab.
Here, you can choose the pre-defined size Google maps.
Please read Google Maps Terms of Service before embedding the maps.
I chose, Custom Size so that I have a full control to have the size that will match with my theme’s content width.
In the width box, as we found out earlier, our Twenty Seventeen theme has 740px width content, so let’s say here I want the map to have 720px width. I typed 720 for the width, 500 for the height.
Click “Preview the actual size” to preview, then copy the code that starts with “<iframe>”.
4. Go back to your page or post, and edit it.
Make sure you are on “Text” tab to edit.
Paste the copied embed code anywhere you want.
Preview your changes.
5. Click “Update” button if you’re happy with your map.
If you want to change the width or height, you can adjust it in your post back-end.
In “Text” tab, check your Google maps iframe code, you will see width=”xxx” and height=”xxx”. Change these value as your need.
Create A Contact Page in WordPress Video Tutorial WP
In my case, because Twenty Seventeen has 740 for the content width, therefore I changed 720 to 740 so that my map will exactly fit with my content width.
Click “Update” button to save your changes.
Check If Google Maps Responsive
Google maps code that is pasted in our content area will be responsive IF your theme is also responsive.
Because this demo uses Twenty Seventeen, which already is responsive therefore the map will be responsive as well.
These days, WordPress themes are mostly responsive. If you are still using a non-responsive theme, then you miss the chance to deliver your content to mobile device readers optimally.
These days, who does not use mobile devices to surf the internet?
To see whether your are using responsive or not, there are ways to do this.
If you use WordPress 4.7 or newer;
1. You can use Customizer control. Open your Customizer.
2. In the bottom of your Customizer, you will see 3 little buttons with device icons, a desktop, a tablet, and a mobile phone icon.
Click each of these to preview your maps in these devices.
If you use an older version of WP or if your website is not a WP site, you can check this still with your browser’s development tool.
With Chrome, right click somewhere on your website’s page, select “Inspect”.
Now next to the inspector arrow icon you’ll see the little square, mobile phone icon look button (see screenshot below). Click that to preview your page in mobile devices screen.
Embed Google Maps with Directions
This will embed the map with two destinations, from address A to B.
1. In Google Maps, select “Directions” type your start address and end address.
2. Then repeat the steps above to get the embed code and adjust the width.
Embed Google Street Views photos from Google Maps
For some reasons, you may want to embed the street view pictures to your website.
Before you do that, you may want to check if the picture is subjected to a copyright.
1. In Google maps, you will see a little man icon on the right corner of your screen.
2. Drag it. As soon as you drag this icon, there will be lots of light blue circle appear on your map. This indicates that in those spots are pictures.
3. Drop it to one of those circles.
You will see the spot’s photo.
3D pictures have the half circle icon on them, 2D pictures have camera icons on them.
4. In the right top corner, you will see the profile of a person who photographed the picture. You may want to contact this person to embed the pictures.
Next to it, there are “…” three dots icon” click that and select “embed”.
Follow the instruction covered in the steps above to get the embedding code.
We have done it! It was fast and easy, wasn’t it?
I personally have not tried any WordPress plugins to do this, because it was too easy. Share if you use a plugin for it and your experience.
By now you can add Google Map in WordPress Contact page or post confidently.
