Update (8 Mar 2009): Updated again to fix the constants broken by a change made by Google. Thanks to brian, who left a comment asking about the maps not working.

Update (30 Jan 2007): Updated again to make a link in the popup actually open a new window. Did this by embedding a javascript OnClick handler in the html attribute of the marker element in the xml file.

Update (6 Sept 2005): I’ve updated the XML file goomap1.xml again, this time to include a link around ‘IBM’. Note that the anchor tag must specify a target so the link doesn’t open inside the IFRAME, and of course angle-brackets must again be XML encoded.

Update (1 Sept 2005): I’ve updated the XML file goomap1.xml to include a break (<br/>) between IBM and Dev in the info popup HTML. It must be XML encoded to obscure the angle-brackets from the XML parser.

Sites like MapQuest and MapBlast served our mapping needs first, but Google Maps started the second revolution in online mapping. Click and drag to pan in realtime. Zoom in and out just as quickly. Click a button to get satellite imagery instead of a map. Now they offer a hybrid mode with streets and labels overlaid on top of the satellite imagery. It’s all very cool.

Google Maps has a mapping API with which you can build and use your own maps, complete with custom markers, animation, popup information bubbles, and the works.

So to build maps you simply sign up for a Google Maps API Key, reference a Google-provided script in the HTML head element, and embed a div and some simple Javascript in your HTML, and you’re off to the races.

Google Maps and WordPress

Of course, it’d occasionally be nice to embed a custom Google Map in a WordPress post. Detailing recent travel, geo-tagged photos, whatever.

Problems Embedding Google Maps in WordPress Posts

The first problem that arises when trying to include a map within a WordPress post is this: complex inline Javascript is essentially rendered useless. But you can call a function. So we can offload the Javascript functionality to a file, reference it, then call the function to build the map.

However, a second problem shows up. Google Map API Keys are good for one directory on a server only, so the API key would only work for the root or wp-content, or another static location.

The Solution

The solution is four-fold

1. Move your Google Maps Javascript to a .js file, or simply download and use GooMaps.js.
2. Move the map data to an XML file. goomap1.xml
3. Call the Javascript function from a standalone HTML file. goomap1.html
4. Embed the HTML file in an IFRAME within your WordPress post.

<br /> Sorry. If you’re seeing this, your browser doesn’t support IFRAMEs. You should upgrade to a more current browser.<br /> Simple as that. Mostly.

In the example to the right, a hybrid style map is centered around IBM in Austin, TX. Two custom icons and shadows are placed on the manufacturing plant on the West side of Burnet Rd. and the development buildings across the street.

This was created with an IFRAME tag embedded in this post, along with uploaded XML and HTML files, goomap1.xml and goomap1.html, to describe the map data and the IFRAME HTML, respectively. The IFRAME code also includes the Google Maps Javascript and some custom Javascript code.

Let’s get into those steps in more detail.

Step 1 — GooMaps.js – Google Maps Javascript File

You’re going to want to put code similar to the following in a Javascript file. Let’s call it GooMaps.js.

It supports the following features:

• You can specify the center, the zoom, the map type (“Map”, “Satellite”, and “Hybrid”) and the base URL for icon files. Use the markers tag.
• Include a list of markers, specifying the latitude, longitude, html caption, icon and shadow icon, and their sizes. Use the marker tag.

You can download and use this if you wish. No warrenties, use at your own risk, I’m not liable, an so on. Feel free to use it but I’d appreciate a back link.

// Function: createMarker
// Creates a GMarker at a given point with a given icon
//  Then adds a "click" event listener that pops up
//  some caption (HTML formatted)
// Modified from Google Maps API Reference
// Added support for specifying icons and html captions
function createMarker(point, icon, html) {
  var marker = new GMarker(point, icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}
// Function: GooMapXml
// Reads an xml file, the name of which is specified
//  in an attribute of a span with the id mapinfo.
function GooMapXml(){
  // Find mapinfo span and get name attribute
  var mapinfo = document.getElementById('mapinfo').getAttribute('name');
  // Create GXmlHttp object to fetch XML document
  var request = GXmlHttp.create();
  // Open the connection to the XML file
  request.open("GET", mapinfo, true);
  // Describe a function to handle the completed request
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      // Get XML file contents
      var xmlDoc = request.responseXML;
      // Get markers element
      var markers = xmlDoc.getElementsByTagName("markers");
      // Get iconbase attribute
      iconbase = markers[0].getAttribute("iconbase");
      // Set default maptypes array
      maptypes = [G_SATELLITE_MAP,G_HYBRID_MAP];
      // If maptype attribute is present get it and set accordingly
      if( markers[0].getAttribute("maptype") != null ) {
        mt = markers[0].getAttribute("maptype").substring(0,3).toUpperCase();
        switch( mt ){
          case "SAT" :
            maptypes = [G_SATELLITE_MAP,G_HYBRID_MAP];
            break;
          case "HYB" :
            maptypes = [G_HYBRID_MAP,G_SATELLITE_MAP];
            break;
        }
      }
      // Get map div from HTML doc
      var map = new GMap(document.getElementById("map"),maptypes);
      // Add small google map controls
      map.addControl(new GSmallMapControl());
      // Add map type buttons
      map.addControl(new GMapTypeControl());
      // Create point for center (get x,y from attributes of markers element)
      var cpt = new GPoint(
                    parseFloat(markers[0].getAttribute("centerx")),
                    parseFloat(markers[0].getAttribute("centery")));
      // Center and zoom map (zoom specified in attribute of markers element)
      map.centerAndZoom(cpt, parseInt(markers[0].getAttribute("zoom")));
      // Get marker element vector
      var markerlist = xmlDoc.documentElement.getElementsByTagName("marker");
      // Loop through marker elements
      for (var i = 0; i < markerlist.length; i++) {
        // Create points based on lat, lng attributes
        var point = new GPoint(
                        parseFloat(markerlist[i].getAttribute("lng")),
                        parseFloat(markerlist[i].getAttribute("lat")));
        // Create icon
        var icon = new GIcon();
        // Set image and shadow from iconbase and icon/iconsh attributes
        icon.image = iconbase + markerlist[i].getAttribute("icon");
        icon.shadow = iconbase + markerlist[i].getAttribute("iconsh")
        // Set icon and shadow sizes from attributes
        icon.iconSize = new GSize(
          parseInt(markerlist[i].getAttribute("iconszx")),
          parseInt(markerlist[i].getAttribute("iconszy")));
        icon.shadowSize = new GSize(
          parseInt(markerlist[i].getAttribute("iconshszx")),
          parseInt(markerlist[i].getAttribute("iconshszy")));
        // Set icon anchor
        icon.iconAnchor = new GPoint(1, 1);
        // Set icon window anchor
        icon.infoWindowAnchor = new GPoint(5, 1);
        // Call createMarker w/ point, icon and html from attribute
        var marker = createMarker( point, icon,
          markerlist[i].getAttribute("html") );
        // Add marker overlay to map
        map.addOverlay(marker);
      }
    }
  }
  // Send request to get XML file
  request.send(null);
}

Step 2 — XML Map Data

Next, build an XML file containing enough data to describe the map.

Update #1: I’ve updated this to include a break (<br/>) between IBM and Dev in the info popup HTML. It must be XML encoded to obscure the angle-brackets from the XML parser.

Update #2: I’ve updated this to include an anchor around IBM in the info popup HTML.

Step 3 — HTML Google Map File

You need a file in a static location to embed the API functions provided by Google. Otherwise you’ll get a popup complaining that your API key is for a different URL. Make sure you replace [**your api key**] in the code below with your Google Maps API Key.

This HTML file is simply the contents of the IFRAME you’ll be embedding in your WordPress post.

 
    <script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=[**your api key**]" type="text/javascript"><!--mce:0--></script>
    <script src="http://techrageo.us/wp-content/GooMap.js"><!--mce:1--></script>
 
<script type="text/javascript"><!--mce:2--></script>

Step 4 — Embedding Google Map in Your WordPress Post

Finally, when you get to the point where you want to embed the map, simply include the following in your post.

Sorry. If you're seeing this, your browser doesn't support IFRAMEs.
You should upgrade to a more current browser.

In the beginning, we mapped with MapQuest or Yahoo Maps or their ilk. We’d enter an address and get back a zoomable, pan-able vector map. Or we’d enter “from” and “to” addresses and get back a turn-by-turn driving plan. Some of these vector mapping services had features to show local businesses or, now and then, view satellite images of the area.

More recently, Google outdid every generally-available mapping interface on the web with Google Maps, chock-full of draggable scrolling, clever pushpins, a rich API interface, and of course a beta tag. Before long they added satellite images. (As an aside, it puzzles me why they used such old imagery. For example, I always pop in my address and check out the view from above. In Google Maps it’s a black and white lo-res image, while on the other hand, at GlobeXplorer I get a hi-res color image — not for free, of course, but my point is that better is availabe. Google has excellent hi-res color imagery of some areas and I hope they extend this coverage.) Google has also recently added a hybrid viewing mode where the satellite imagery is overlaid with roads and whatnot from the vector maps.

So, as things settled down and Google finished digesting the online mapping world, they released Google Earth, built on Keyhole, which they bought a while back. In its basic form, Google Earth is free and, simply put, amazing. Plus and Pro versions are also available, for $20 and $400, respectively (the Pro price is per year). Plus adds GPS integration and annotation features, while Pro adds layers and overlays, along with the ability to pay more for additional modules (flythrough movie making, premium printing, GIS import, etc.).

Microsoft, already quaking in their clogs over the fact that Google is likely to buy Bill Gates before long (or more likely, build a better one), has released Microsoft Virtual Earth. I wasn’t expecting much, but it’s not too shabby. It has a satellite view that smoothly integrates the overhead imagery with vector bit, roads, parks, labels, etc. much like Google Maps’ hybrid view. I did not see a way to turn the integration off, however.

Micrsoft had already swallowed up Terraserver but this Virtual Earth, while boldly ripping off Google Maps, is a welcome addition to the mapping fray. It’s good to see this technology progressing in a publicly-available way. There’s much more that is being done with mapping in the private and government sectors, but Google Maps, Google Earth, and Microsoft Virtual Earth are leaps and bounds ahead of what we were using only a year ago.

Microsoft Virtual Earth seen here.

Google Earth / Keyhole is a downloadable mapping application that’s free for the downloading. Google Earth Plus is a $20 upgraded version that includes GPS integration, high-res printing, email support, annotation, and .csv importing.

Background – Google Earth in action

Google Earth