Multimedia and Technology Training At the UC Berkeley Graduate School of Journalism
Once you've created a map, Google Maps presents a "Link" button, which presents two fields:
If you're working with a standard/static web site, you can simply copy the provided "embed" code to the clipboard and paste it anywhere in your HTML document. The map is embedded by using the HTML <iframe> tag, which creates a virtual frame in the middle of a web page, into which is inserted content (such as a map) from another site.
That's all well and good for a site that you have 100% control over, but many content management systems allow posting of content by anonymous, semi-anonymous, or less-trusted users. It would be trivial for a shady user to embed malicious code from another site into the middle of an iframe. In other words, if you run a content management system where there is a possibility that untrusted users might be posting, you could unwittingly end up hosting malicious code on your web site.
For this reason, WordPress has some security restrictions in place to prevent this from happening. Those security restrictions appear in two places in the WordPress codebase, and you need to be aware of them so you can take steps to let your authors and editors post maps in iframes.
In the Visual Editor: WordPress provides two ways to create a new Post or Page: HTML mode, and Visual mode.

Toggling between the Visual and HTML editing modes in WordPress.
HTML mode is your standard web form (but with helpful formatting buttons), while Visual mode provides a graphical view that hides the HTML from you. This makes things more comfortable for people who don't like looking at HTML code. If you switch to HTML mode, paste in the iframe code provided by Google, and then switch back to Visual mode, you'll find that most of your iframe code has been stripped out. You can get around this in one of two ways: 1) You can disable the Visual mode entirely by going to your profile in WordPress and deselecting the checkbox "Use Visual Editor." However, you will no longer have access to the visual editor in WordPress; 2) Modify the source code of WordPress itself to make the visual editor (aka "TinyMCE") stop stripping out your iframes. Here's a good guide on how to do that.
In the HTML Editor: Even after you've prevented the visual editor from stripping out iframes, you may or may not find that WordPress itself still strips them out after you hit the Save button. Remember what we said above about trusted users? When you click Save, WordPress checks to see what your "role" is on the site. If you're an Administrator or an Editor, you're allowed to save iframe content. But if you're a normal Author or Contributor, you're not allowed to. Makes sense when you think about, though it's certainly frustrating.
At this point you have several possible ways to solve this problem. Any of these will work, but with different upsides and downsides:
- In its simplest usage, the plugin can transform any link that points to a KML file on the web into a perfectly working Google Map. To make this work, you'll need to extract a different kind of link from your Google Map. First, make sure you're in My Maps mode in Google Maps. Select the map you want to link to. Now, rather than using the "Link" button in Google Maps, look for the link that says "View this map in Google Earth." That link points to what's known as a "KML" file (we won't cover the meaning of that term here). Don't click on that link! Instead, right-click it and select "Copy link location" to put its URL on your clipboard.
Now create some text in the post body, such as "Map Here" and link it to the URL on your clipboard. When you save the page, you'll find that a perfectly rendered Google Map will magically take the place of the link you created. Pretty cool. See the plugin's settings for additional options.- If you want more control over exactly how your map is embedded, you can use the shortcode solution that comes with the plugin. The shortcode is documented in detail here, but the short version is that you can insert something like this in either the HTML or Visual editor:
[xmlgm {http://www.xyz.com/text.kml} width=400;height=300]
...replacing the URL shown there with the URL to the KML version of the map you want to embed. Again, the shortcode is capable of accepting many different arguments, so have a look at the documentation.
And there you have it - a seemingly simple problem made ridiculously complicated by security requirements. But with a little knowledge and the right tools in your toolbelt, it's not hard to have a whole team of journalists happily inserting maps into your site.
Comments? Contact us | ©2007-2009 The Regents of the University of California.
Comments
1) Glenn Nicholas, January 30, 2009 at 2:40 a.m. [Link]
Scot, what a great way to include Google Maps, and it solves the iframe issue. WordPress MU users will have iframes and javascript stripped no matter whether they use the visual editor or HTML, the approach you describe solves the issue for a lot of people.
2) Maria Greene, March 1, 2009 at 10:45 a.m. [Link]
The TinyMCE Valid Elements plugin will help with the "visual editor stripping the iframes" issue.
3) chrisr, March 31, 2009 at 4:12 p.m. [Link]
Hi Scott,
Thanks for a great article. I found that some of the map plugins are a bit too complicated for the average user - this became clear when I was trying to help my Mom, who is 71, insert a map in her blog.
My solution was to write a plugin called 'MapPress' that lets you *easily* insert maps directly from the WordPress editor. Just type the address(es) and insert the map. The plugin is listed on WordPress.org and the direct URL is: www.wphostreviews.com/mappress.
4) grylff, September 19, 2009 at 12:27 a.m. [Link]
Thanks for the post -- it's certainly a great way to learn how to do it easily. I have to say, though, it's often a good idea to learn about the underlying technologies and API's so as to understand how everything works and any potential security implications. The Google Maps API (http://code.google.com/apis/maps/) is not terribly difficult to get started with directly.
Add your comment
Login to post a comment.