- Santa Clara Sporting 97 Girls Soccer - http://sporting97green.com -

Google Maps

Posted By Dan Hinz, Jr. On 01Jul2009 @ 12:40 In Site Operation | No Comments

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 [1]

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 [2]

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

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

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_Custom [5]bars.  A new window will open and you can change anything you want.  Adjust anything and everything you want in the image.

PView1a [6]

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 [7].


Article printed from Santa Clara Sporting 97 Girls Soccer: http://sporting97green.com

URL to article: http://sporting97green.com/2009/07/google-maps/

URLs in this post:

[1] Image: http://sporting97green.com/wp-content/uploads/2009/07/Vis1-90a.jpg

[2] Image: http://sporting97green.com/wp-content/uploads/2009/07/html1-90a.jpg

[3] Image: http://sporting97green.com/wp-content/uploads/2009/07/GM_Sm2a.jpg

[4] Image: http://sporting97green.com/wp-content/uploads/2009/07/link1.jpg

[5] Image: http://sporting97green.com/wp-content/uploads/2009/07/link1a_Custom.jpg

[6] Image: http://sporting97green.com/wp-content/uploads/2009/07/PView1a.jpg

[7] here’s a link to the Google instructions: http://maps.google.com/support/bin/answer.py?answer=72644&cbid=-1p09lzb4r05z6&src=cb&lev=index

Copyright © Santa Clara Sporting 97 Girls Soccer. All rights reserved.