Google Maps

by Dan Hinz, Jr. on 01Jul2009 Print This Post Print This Post

How do I add a google map to my WordPress post?

It’s fairly simple and I’ll show you how in this article. At the beginning of each step I’ll tell you what to do and show you a picture or two.  At the end of each step I’ll explain the why so you can skip to the “what’s” quickly.

1. The first step is to write your article and save it as a draft.  Once you’ve saved your draft, you need to shift to the HTML editing mode, by clicking on the tab at the top of the editing window.
Vis1-90a

The reason for doing this is that the editor must be in the HTML mode to enter the necessary information and HTML mode is not friendly to use for general editing, so I like to use it as little as possible.  In the visual mode, the editor strips out some of the information, destroying the map and the link.
html1-90a

In a separate browser window, open google maps.  Put the address you want to map in the address bar.  GM_Sm2a

Once your destination is displayed, click on the “link” button and a pulldown will open displaying two pieces of code:link1

Select the text in the lower bar(Paste HTML to embed in website).  You can either right click on the text and select copy or click in the box and then copy it to the clipboard by pressing “CTRL + C”.

Go back to your post and paste the text from the clipboard into the post by pressing “CTRL + V”.  Save your draft.  Click Preview to see you results.  Publish your post!

If you want to “tweak” what displays and how it’s displayed, click on the link below the two link1a_Custombars.  A new window will open and you can change anything you want.  Adjust anything and everything you want in the image.

PView1a

You can change the size to one of the pre-defined sizes or a custom size.

You can move the image around (move the target so that major roads are displayed with it’s exactly in the center or wherever)

You can close the address bubble etc.

One more thing.  If you want a link without an image or vice versa, you can do that too, with one extra step.

The code that you paste is comprised of two parts.  The first part is the image that is displayed in the post and the second part controls what happens when the link is pressed.  To show only one or the other, simply delete the undesired code.
Below is the section to look for:
. . .output=embed"></iframe>
represents the end of the map image. And

<small><a href="http://maps.google.com/map...
Represents the beginning of the link to the larger map.

Here’s a video (2+ min) that shows how to create a Google Map:

and another (3 min) showing how to “customize” it:

If you need more details then go to google:
here’s a link to the Google instructions.

Print This Post Print This Post

Leave a Comment

CommentLuv badge

Previous post:

Next post: