Adding Wordpress Google Maps

It’s nice to have Google Maps on your web-page for various reasons, so if you are using WordPress, here’s a handy tutorial how to add a WordPress Google Map in 5 minutes!

Preparations for Inserting a Google Map in WordPress

Google Maps is a flexible API for getting Google Maps to your website, WordPress included. The simplest way to do that is using an IFrame, and Static Google Maps. So, let’s go over what you need to get a WordPress Google Map!

First, you need a WordPress plugin called InsereFrame. It lets you insert IFrames using short-codes. Once you install it, activate it, and we are finished adding new plugins for our needs.

Google Map Settings for the embedded window

Now, go to Google Maps, and navigate around, find the spot you need to display in your WordPress page or post. Once you found the location, you need to click on the “Link” tab in the upper right corner. A small frame will pop up offering you embed links from email or website. You need the second option, but even better,  click on the “Customize and preview embedded map“. A new window will pop up (if your browser lets new windows to be popped up, check browser settings if this window does not come up).

What is really lovable in the pop up window is that you can choose number of parameters for your Google Maps window that you are going to embed to WordPress. First, you can set the size (resolution) of the window, next the map type, and all that with preview! As far as the Map types go, I recommend using any except the “Earth” type. This is because if one wants to preview in Google Earth style, needs to download a plugin for that. Ok, it’s not such a big problem, as your embedded window will display a nice link to download the plugin, and once it’s installed the user is ready to view the maps in Google Earth style (3D) too.

You can also scroll, position, rotate (if in “Earth” mode), and once you are happy with it, copy the lower code from the window (“Copy and paste this HTML to embed in your website”).

WordPress Google Map Embedding

Once you have the code copied, you need to add it to your post or page like this:

[ iframe:  width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&ll=36.102376,-112.060547&spn=24.76128,37.353516&z=4&output=embed" ]

It’s enough to copy the parts that are limited with the <iframe> code, like shown on the right image. You can drop the last <iframe> and convert the start and end <,>’s to [ and ]. Add a “:” after iframe and you are ready to go.

Important: you need to add the iframe and google maps code you copied from our pop-up window IN HTML EDIT MODE! If you are in visual mode the code will get messed up and your WordPress Google Map will show the whole Google Maps window, like you would see it while visiting the actual site. So, if you are having that, delete the code and re-add it in HTML edit mode. Afterward it’s safe to switch back and forth between Visual and HTML edit mode.

I added spaces after and before the ]’s so the IFrame plugin does not convert that to an actual IFrame. I did a small modification in the positioning and zooming of the previous code (which was showing the US west coast), and now it’s showing the general San Fransisco Bay area:

Other than that, you are ready to go! Enjoy your new Wordress Google Maps!