Embedding Google Maps into WordPress Posts and Pages

 

Have you ever visited a web page and wondered how they managed to put a map of the exact location onto the page?  It’s actually quite an easy feat.  You’ll need to have two browser pages open; one with your admin area of WordPress logged in and the other at maps.google.com

Here’s what you do:

On the Maps page of Google,

  1. Enter the address of the location/business for which you want to embed a map to on your site.
  2. On the bottom right hand side of the page, you’ll see a gear icon.Embedding Maps--Gear Icon
  3. Click the gear and a pop-up will appear. Click on “Share or embed map”.Embed Google Maps
  4. A new window will open:  Embedding Maps |Choices Window
  5. Click on “Embed map”, choose the size map you want from the drop down list.
  6. Select/highlight all the text that appears in the white box and right-click and copy. We will be taking this text into your website.

Embedding Maps-Copy the generated code

 

Now that we have grabbed code to embed into your site, we need to take it to the visual editor of your post or page and paste it in.

  1. Log into your site dashboard.
  2. Either compose the post/page that you want to add the map to, or if it is already composed, select it for editing from your list of posts.
  3. Once you’re in the editor of your post/page you’ll want to click on the “TEXT” tab on the top right of the editor box.

Embedding Maps | Text Editor Button

  1. Once you’re on the TEXT tab, where ever you want to place your map, right-click and PASTE the text you copied from the Google embed.

Embedding Maps-Copy the generated code

  1. Remember to update the post or page.
  2. When you click the “VISUAL” tab button again in the editor after you’ve updated, all you’re going to see is a place holder that looks like this:

Embedding Maps | iFrame Place Holder

  1. Have no fear! Just go visit your site in a different window or click the Embedding Maps | Preview Changes Button button and it will take you to the page you just edited.

 

And now you have embedded a Google Map into your page or post! Congratulations!

 

Orange Ambition can help you with all kinds of WordPress conundrums!  We are WordPress Wranglers Extraordinaire!

Contact us today for support with your site.