How to Add Google Maps to WordPress Post

by Elaine on January 11, 2013

Wordpress Tutorial – If you are running any type of business that has a store front and requires people to search for your location, it’s best to have a link or image of your location on a map.  My Wordpress tutorial will show you how to add a Google Maps into your Wordpress website without a WordPress plugin.  It’s very simple and only requires 4 steps.  Afterwards you will have a post that looks like the screenshot below:

wordpress tutorial how to add google maps to wordpress page post 4 How to Add Google Maps to Wordpress Post Add Google Maps to WordPress Post / Page

Overview of Steps to Add Google Maps to WordPress Post / Page:

  1. Go to Google Maps
  2. Search for Address & Click on Link
  3. Copy Google Maps HTML to Paste into WordPress
  4. Paste into WordPress Post / Page
  5. See Google Map in WordPress Post / Page

Steps:

1.  Go to Google Maps

Google maps is the best choice for linking people to.  It’s the most popular and the map site people most go to when searching for places.

  • Go to your browser and type in the address – maps.google.com

2.  Search for Business Address  & Click on Link

You can search for a business address or the business name in the search box.  Google maps will pin points on a map.  Click on the pin on the Google map that you want to display on your site.  In my example, I’m searching for the ‘Empire State Building’.

wordpress tutorial how to add google maps to wordpress post How to Add Google Maps to Wordpress Post Search Google Maps & Click on Pin to Add to your WordPress Website
  • Search for Business Address or Business Name in Google Maps Search box
  • Click on the pin ‘A’ if if that is the correct address
  • Click on the infinity ‘link‘ symbol beside the printer icon

3.  Copy Google Maps HTML to Paste into WordPress

A Google Maps window will pop up to either copy a link to Paste into an email or into a website.  You will select the link to embed into a website.

wordpress tutorial how to add google maps to wordpress page post 2 How to Add Google Maps to Wordpress Post Copy Google Maps HTML To embed into WordPress Post / Page
  • Go to the ‘Paste HTML to embed in website’
  • Copy all the contents of that text box
  • If you want to customize the size of your map, you can click on ‘Customize and preview embedded map’

4.  Paste into WordPress Post / Page

Now you can go to your WordPress and either creating a new post/page or edit an existing one.  You will go to the ‘Text’ view which also means ‘HTML’ view to paste in the code you copied in step 3.

wordpress tutorial how to add google maps to wordpress page post 3 How to Add Google Maps to Wordpress Post Paste Google Maps HTML into WordPress Post/page
  • Login to your WordPress Administrator Backend
  • To Add / Edit to a Post – Go to Posts, ‘Add New’, or edit an existing post
  • To Add/ Edit to a Page – Go to Pages, ‘Add New’, or edit an existing page
  • Click on ‘Text
  • Paste the code copied from Step 3 into the Post/Page
  • Click  on ‘Save Draft’ or ‘Publish’

5.  See Google Map in WordPress Post/Page

Now you can refresh your WordPress Website and view your post.  You will see that the Google maps is now embedded into your WordPress page or post.  You can see the Google map example I embedded here.

Hope that helps.  Please leave a comment if you have any questions.

Thanks,

Elaine

 How to Add Google Maps to Wordpress Post

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and WordPress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: