wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials How To Add Google Map in WordPress Contact Page
WordPress Google maps in contact page

Tutorials

How To Add Google Map in WordPress Contact Page

Last updated on July 13, 2017
Posted on February 22, 2017

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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)

You'll see this Customize button on the top of your screen when you're logged in
Customize – when logged in

Then click Theme Options.

Theme options in WordPress 4.7 customizer
Customizer – Theme options

Click on “One Column” checkbox. Hit Save & Publish button and close your Customizer.

Twenty Seventeen theme has one column as a page option
Twenty Seventeen theme – One column

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.

Twenty Seventeen, inspect element of a page
Inspect element

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).

Typing your Google maps address and then click share button
Click “Share” icon

Alternatively, you can click on menu icon on the top, and select “embed or share map” link.

Menu on Google maps
Menu on Google maps
Share and embed map link
Share and Embed map

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.

Click Embed Map tab
Embed Map tab

Here, you can choose the pre-defined size Google maps.

Please read Google Maps Terms of Service before embedding the maps.

Google maps provided sizes are, small, medium, and large.
Google maps preconfigured data-lazy-sizes
Small, medium, custom size

I chose, Custom Size so that I have a full control to have the size that will match with my theme’s content width.

Custom size Google maps
To preview your Google maps

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.

Edit tab on your post editor
Click on “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.

Google maps width and height
Editing the value

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.

If your site isn’t WP website, edit your HTML code

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.

WordPress 4.7.2 icons to preview media screens
WordPress 4.7.2 icons to preview media screens

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.

Chrome media screen inspector
Chrome media screen inspector
Embed Google Maps with Directions

This will embed the map with two destinations, from address A to B.

Google “Add Places” feature will be disabled on March 2017

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.

Google street view icon
Drag this icon to a destination

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.

Dropping the icon to a blue circled spot
Drop to a blue circle

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.

The photographer with embed ability icon
The photographer with embed ability icon

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.

contact google map page twenty seventeen

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← How To Add YouTube Subscribe Button To WordPress Website
→ WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed
  • WordPress feed not updating |Feedburner Email not updating Fix

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept