In February of 2005, Google quietly announced the debut of a new service, Google Maps, that changed the face of mapping and cartography on the Web for an overwhelming number of people. Gone were the tiny, slow-loading, and sometimes ugly digital maps that people were pretty much accustomed to using on the Web, maps that fell below the “fold” of a web page, and were often impossible to navigate. Instead, using the latest in web browser scripting technology, Google Maps offers a fast-loading, tiled map display, a simple yet deep user interface, asynchronous display updates in place of the tiresome click-and-reload routine, and, ultimately, even a rich scripting API. Although many of these features had been seen before in one place or another, no one had seen them all integrated with the attention to detail that we’ve come to expect from Google. Let’s take our first look at how Google Maps changed how people use maps on the Web forever.
Get Around http://maps.google.com
Sometimes you need a map to the map.
Google applied its trademark, carefully designed simplicity, to provide us with its (first) view of place. Go to http://maps.google.com/, and you’ll get the view shown in Figure 1-1. If you want maps of the United Kingdom, try http://maps.google.co.uk/, and you’ll get the view in Figure 1-2. A similar map exists for Japan at http://maps.google.co.jp/.
This shows us what appears as a standard Google search box (called the Location Search box), an overview or orientation map of the country in question, and a results area with instructions and sample searches.
Tip
Please remember that this book was written using beta software, and the Google engineers are continually tinkering with the site in order to provide the most compelling possible system. This means that things will change!
Google Maps is a web mapping service that solves the same old problem of online mapping. So why, ten years or more into the web revolution, is Google Maps such a big deal? Some of the excitement comes from the Google name and its philosophy. Google states on its corporate philosophy page at http://www.google.com/corporate/tenthings.html that “you can make money without doing evil.” However, more of the interest in Google Maps may stem from other ideas stated on the philosophy page—for example, “The interface is clear and simple” and “Pages load instantly.”
Clean pages and fast performance? A commitment to avoid doing evil? Which drives traffic and mind share? Maybe at this moment on the Web you can have it all. In addition to these features, Google Maps also offers a number of innovations in web user interfaces.
- Single search box
The first thing that draws attention is that Google uses a single search box for location searches. Do you want to look up an address? Just type it in the box. No more tabbing between different fields for street address, city, state, and ZIP Code! (In Internet Explorer, you can even paste multi-line addresses into this box, believe it or not.)
- Draggable maps
The standard in web mapping is the usual web interface, in which you click on a button to pan the map and see more terrain. What if you wanted to just click and drag to navigate the map? Well, now you can!
- Integrated local search
You can use that single search box to look for the things you want, such as "hotels near Sebastopol,” or, for more choices, “hotels near SFO” (SFO is the code for San Francisco International Airport). If you just want to find all the hotels in a given area, zoom into that area, then search for “hotels,” and Google Maps will constrain its search to the area shown on the map.
- Satellite imagery
With a single click you can flip between viewing a map and viewing satellite or aerial photography [Hack #4] . How cool is that?
- Keyboard short cuts
You don’t need to click and drag your mouse, or strive to hit the little Zoom In and Zoom Out icons: you can use the arrow keys to move around in your map [Hack #3] .
Google Maps starts with the overview map shown in Figure 1-1. You can move around that map by clicking and dragging your mouse on the map, by double-clicking your mouse on the map, or by using the arrow keys. Holding the mouse button down and dragging will cause the whole map to move, as if the web browser is providing a small window onto a much larger map. If you double-click on a spot, the map will smoothly pan until the point you clicked on is centered. Using the arrow keys has the same effect as clicking and dragging with the mouse. We explore the user interface in more detail in “Navigate the World in Your Web Browser” [Hack #3] .
There are many ways to enter locations [Hack #2] , but let’s start off easy. The conventional way of entering a location is a street address. We’ve come to accept address lookups in online mapping services as commonplace, but there is a great deal of behind-the-scenes work. In order to display a map of a street address, the system must first find a latitude and longitude that corresponds to this address. The process of linking something (e.g., a street address) with a latitude and longitude is called geocoding.
When you enter a query into the search box, Google takes your input and does its best to turn it into a location that can be mapped. So let’s start close to home and enter the street address of O’Reilly Media headquarters into the search box:
1005 Gravenstein Highway North, Sebastopol, CA 95472
|
You could also enter the company name and get the same result:
O'Reilly Media, Sebastopol, CA 95472
|
Click Search and you’ll get the map shown in Figure 1-3, which shows the address (as best as Google can determine) and hyperlinks to get directions to or from this spot.
The satellite view in Figure 1-4 (zoomed in from the area shown in Figure 1-3) clearly shows that the O’Reilly Empire is centered in a parking lot median strip….
You can also enter a street intersection; for example:
Hollywood & Vine St, Hollywood, CA 90068
|
The act of looking up a location has set your search area, or the extents of your search area, and you can now use the search box to get more information. For example, if you first zoom in to San Francisco, you can then search for “great sushi” and return results limited to the San Francisco area.
The Google Maps tour suggests that a search on “Great Sushi in New York” is useful. It turns out that “great sushi in San Francisco” also brings up a list of restaurants, but for some reason, “great sushi in Sebastopol” just doesn’t work. To be fair, “great sushi in Sebastopol, CA” does bring up our two sushi places. But it also brings up the Larkspur Elementary School District, 37 miles from Sebastopol.
Varying the adjective used—say from “great” to “mediocre”—brings up a new grouping of restaurants. These are not the same places that show up when you do a Google search on “mediocre sushi in San Francisco,” so I’m not sure what the qualifications are. “Cheap but filling sushi in San Francisco” might be a more palatable search!
Finding meaningful results for local search is still an unsolved problem. Fortunately, Google is good at search—and getting better all the time.
Google Maps supports many ways to specify location.
Using addresses to find a place makes a lot of sense for places that have an address, but what do you do when you don’t have an address? Fortunately for you, the Google Maps team has supplied a number of additional ways to find yourself.
I suspect that the goal is to create a system in which, if you can imagine a somewhat standard way of representing a location, then Google Maps will support it. The functionality is not quite there yet, but it does support a lot of ways of finding places. As with all of the hacks in this book, and as a general philosophy of life, experimentation is your friend!
The number one rule for finding places using Google Maps is that if there is a way of specifying location that makes sense to you, go ahead and try it! As we saw in “Get Around http://maps.google.com" [Hack #1] , standard addresses work, but so does entering a city and state, or a ZIP Code alone. Street intersections also work, as long as you add a city and state.
You can also enter coordinates as latitude and longitude, like 38, -122, or 38 N, 122 W. Most modern people don’t relate to latitude and longitude directly, but it is a compact and precise way to mark a location.
Google Maps is good at searching by business name. You can search by business name, city, and state—for example, “O’Reilly Media, Sebastopol, CA”—with good results. Entering a business name and a city, or a business name and a state, brings up a list of possible matches.
The best Google Maps feature ever is the proximity search, at least for one of my friends, who is a vegetarian and travels a lot. Before Google Maps, he spent a lot of time on other map services planning for trips. A common query was for the closest Whole Foods Market in whatever city he was visiting. Now he can just type his query into the single search box: “whole foods market near Boston, MA.” As long as he remembers to change Boston, MA to his current city, he is set. Table 1-1 shows examples of searches that do and don’t work.
Table 1-1. The limits of Google Maps’ understanding
Not everything is documented! Like Google’s search, there are a lot of things that just work that are not documented (or at least they are not documented where you are likely to see them). For example, as of April 30th, 2005, I could find no mention that entering a latitude and longitude in the search box would have any effect, and yet it works!
The moral is that when you have a wild idea about a way to search for something, try it first, and then if it doesn’t work, enjoy that temporary feeling of satisfaction that comes from being ahead of the curve (well, either ahead of the curve, or plumb crazy, but since there is no reliable way to determine which is which, you might as well enjoy it).
Unless you specify a location in your search—e.g., “edible food near King’s Cross”—Google Maps assumes that the place that you are searching for falls within the area, or extent, that is currently shown in the map. As a result, a search that works on the full extent will sometimes fail if you have a local context set. You can reset that context by adding “near [some location]” to your search, or by clicking on the Google Maps logo in the upper left of the page.
There is no doubt about it: Google has significantly raised the bar for user interfaces to maps on the Web. Here’s why.
When Google Maps was launched in February 2005, the public response was instant and almost overwhelmingly positive. Although the remarkable speed with which any map appeared, tile by tile, had a great deal to do with people’s appreciation of Google Maps, most of the praise and recognition was saved for the browser interface itself. The Google Maps user interface is clean, simple, straightforward, quick loading, and easy to use. In other words, it offers yet another classic Google user experience.
The main thing about the Google Maps user interface that really wows everyone the first time they see it is the drag panning. Go to any location in Google Maps, position the mouse pointer anywhere on the map, click and hold your left mouse button, and then move the mouse itself. Lo and behold—the map moves with it, and the page in your browser doesn’t even reload! Releasing the mouse button, of course, causes the map to stop panning.
You’ll notice that, in the background, your browser has already loaded many of the tiles outside your original view, so that you don’t have to wait for them to load as you’re panning around—that is, unless you’re on a slow Internet connection, or you try to pan very quickly from one edge of the map to the other.
If dragging the map feels a bit wild or difficult to control, the Google Maps interface also allows you to double-click your left mouse button anywhere on the map to recenter it at that location. Double-clicking to recenter gives you a more precise, but somewhat less dynamic way to pan around the map.
The ability to click and drag the map around in the browser window, while not, strictly speaking, new, has never been seen before in a major mapping service on the Web. Gone are the days when browsing a map on the Web involved a tedious wait for the entire web page to reload every time you tried to recenter or zoom the map! Hooray!
Over on the left side of the map, you should see a number of controls in gray and black, as shown in Figure 1-5. If panning by dragging or double-clicking doesn’t suit you, you can use the four arrow buttons to scroll the map north, south, east, and west. The somewhat less obviously labeled button in the center of the other four, which depicts four arrows pointing inwards, returns you to the original view of the last thing you searched for. This button lets you pan around the map, zoom in and out to your heart’s content, and then click the return button to go right back to the place you were originally looking at.
Below the pan controls lie the zoom controls. Google Maps features 18 zoom levels, from a view that shows multiple copies of the Earth’s surface right down to the individual city block. The button marked with the plus sign (+) zooms in one level, while the button at the bottom marked with the minus sign (−) zooms out. Between them runs a long vertical ruler, marked with a tick for each zoom level, with a “handle” indicating the current zoom. You can click anywhere along this ruler to zoom directly to a given map scale, or click and drag the zoom handle up and down the ruler to zoom in and out dynamically. As you zoom in and out, the scale bar at the bottom left changes accordingly. In the smaller versions of the Google Map interface, the vertical zoom control ruler is omitted, leaving the zoom-in and zoom-out buttons stacked immediately below the pan controls.
Last but not least, in the upper right-hand corner of the map, you’ll find the map display controls, as shown in Figure 1-6. As of this writing, Google Maps has three modes: Map, Satellite, and a new Hybrid mode that displays streets and labels semi-transparently over a satellite or aerial image. For New Orleans, there is also a "Katrina” view, which is aerial imagery of New Orleans taken August 31, 2005. The user interface features a button for each mode, with the button for the current mode highlighted in bold. Clicking any one of these three buttons changes modes, allowing you to identify features or intersections in one view, and then immediately switch to another to get more information about what’s there.
Tip
You’ll notice that clicking on the map itself with the left mouse button doesn’t actually do anything in the plain vanilla Google Maps interface. Instead, the left-click is reserved in order to allow you to perform custom actions at any point on the map. We’ll see a number of these custom uses for left-clicking on the map later in the book.
On the lower left side of the standard Google Maps view, you’ll see a scale bar, which indicates distances horizontally across the center of the map in both miles and kilometers, as shown in Figure 1-7. Not only can this be useful for estimating distances “as the crow flies,” but it also gives a sense of how the cartographic projection used in Google Maps distorts and exaggerates the Earth’s surface as you head towards the north and south poles. (This is why Greenland looks bigger than Australia on Google Maps, when in fact it is much smaller.)
One cute way to see this in action is to pan up to the islands in northern Canada, zoom in a bit, and then click the map and slowly drag it upwards, thereby panning south. As you move the map, you can watch see the scale bar get smaller and smaller, and then flip over to a larger increment, before continuing to shrink.
Not only is this a good example of the dynamic nature of the Google Maps interface, but it also illustrates one of the downsides of using the familiar Mercator projection, as Google Maps does. The reason Google Maps uses the Mercator projection instead of one that might provide less visual distortion is that, as with other rectangular projections, it treats all lines of latitude as being perpendicular to all lines of longitude. This property makes doing any kind of calculation to place things on the map so much easier that it outweighs the aesthetic detriments of having distorted northern and southern extremes on the map. Additionally, over smaller areas, the Mercator projection preserves angles across local areas on the map, making it suitable for guiding navigation. (Indeed, this is one major reason the Mercator projection continues to be used after 500 years, in spite of its tendency to distort the areas around the poles.)
But, wait, there’s more! With Google’s typical thoroughness, the Google Maps user interface makes good use of keyboard shortcuts in the web browser as well. Keyboard shortcuts allow you to accomplish the same tasks that most people use their mouse for without ever taking your hands off your keyboard’s home row. (And if you’re a command-line jockey like me, you gotta love ‘em.)
The most immediately useful keyboard shortcuts in Google Maps are, of course, the arrow keys, which allow you to pan the map in much the same way as the aforementioned pan buttons in the upper-left corner of the map, with one difference: if you hold down any arrow key, the map continues to pan—and fairly smoothly at that, if your computer and ‘Net connection are fast enough—until you let up on the key. With a little practice, you can scoot around a neighborhood in Google Maps like a pro, without ever touching your mouse.
If you want to pan around faster at one go, you can use the diagonal arrow keys: PgUp and PgDn pan three-quarters of the way across the map north and south respectively, and Home and End quickly pan west and east by the same amount. Finally, the plus (+) and minus (−) keys zoom in and out by one level, respectively. On some Apple keyboards, such as the one supplied with iBooks, Fn-/ generates a plus sign, Fn-; is minus, and Fn-arrow keys provides the PgUp, PgDn, Home, and End functions.
Tip
In Mozilla Firefox, you may find that if you just typed something into the search box above the map, your browser’s focus is still be on the text box, which means that key presses will show up there, rather than going directly to the map. If this happens, just hit the Tab key (or left-click once anywhere on the map itself) to move the browser’s focus away from the search box. Then the keyboard shortcuts should work as advertised.
It is a curious fact that, as of this writing, although all the pan and zoom controls have associated keyboard shortcuts, there do not seem to be keyboard shortcuts for switching modes. One almost wonders if this isn’t an inadvertent oversight on Google’s part. Fortunately, as the patient and attentive reader will discover, since Google’s code is running on your web browser, you the hacker can fix any such oversights yourself by dipping into Google’s secret sauce.
The secret sauce by which Google offers so much rich functionality with such a seemingly simple interface is referred to by some people as AJAX, which (sometimes) stands for "Asynchronous JavaScript And XML.” By using client-side JavaScript to detect user actions and act on them in the background, Google Maps offers a very pleasingly usable interface to a map of the world, all without the interminable wait for the entire page to reload any time something happens. As we’ll see later in the book, the deep integration with the browser interface at the JavaScript level is also the source for much of the extreme hackability of Google Maps!
Maps are good, but a picture is worth…
Maps show what the mapmaker chooses to show. Google Maps, like most of the online map services, shows maps that are designed primarily for getting around in a car. In America, we pretend we’ve (d)evolved into homo automobilious, but despite our best efforts there is more to the world than scenery and billboards flying past the bug-smeared windshield.
One neat feature of Google Maps is the ability to flip between viewing a map and viewing satellite imagery. In Figure 1-8 we see a map of the Upper West Side of Manhattan, with an odd little shape sticking into the Hudson River on the left side. By clicking on the Satellite link on the upper-right side of the window, you get satellite and aerial imagery.
The aerial view in Figure 1-9 provides a lot more context! You can see the buildings and Riverside Drive. You can even make out individual boats at the 79th Street Boat Basin. You can use the same navigation tricks to pan around in satellite and aerial imagery as you can on the map layer [Hack #3] .
The satellite imagery’s level of detail varies by where you’re looking; some places have much more detail than others.
You can use the aerial imagery as a sanity check. For example, let’s say you are in the North Bay area and are interested in dairy products. You could search for cheese near Petaluma, CA and get a map like Figure 1-10.
To visit Rouge et Noir Cheese Factory (http://www.marinfrenchcheese.com/), you could click on the link on the right side in the list of results, zoom in a bit, and flip to satellite view to get the view in Figure 1-11.
Where’s the cheese? It doesn’t look like it is there. Could it be in that circular compound on the right-hand side? Maybe, except I happen to know that this isn’t the case. It seems that there’s a disconnect between databases at Google. The business listing for Rouge et Noir puts it at 7500 Red Hill Road, Petaluma, CA 94952, but the map pointer is 4.5 miles northeast. Of course, this is beta software!
Entering the address, rather than the business name, into the search box rewrites the address as 7500 Point Reyes—Petaluma Rd and comes closer to locating the Cheese Factory, as shown in Figure 1-12. The pointer is still a bit off, but that can be attributed to the difficulty in geocoding locations from street addresses on roads with long patches between intersections.
Now, as if that weren’t enough, Google has added a Hybrid mode to Google Maps. The Hybrid mode takes a version of the original street map tiles with transparent backgrounds, and then lays them over the satellite tiles. The result is pretty fantastic, as you can see from Figure 1-13, making it much easier to identify what’s being shown in the satellite image.
The ability to flip between maps and satellite imagery is amazingly cool, and is just a hint of what (I assume) is coming. There is plenty of room next to the Map, Satellite, and Hybrid hyperlinks for other views or, as we say in Geographic Information Systems, other data layers. One prominent example was the Katrina button that showed up in the map display of the Gulf Coast of the United States in the aftermath of Hurricane Katrina in August 2005. Clicking this button displayed up-to-date satellite imagery, allowing you to compare before-and-after views of the hurricane’s tragically destructive wake.
What could Google add? How about a link to terrain or elevation data? Or a current weather overlay? Thanks, Google, may I have another?
Driving directions and the single search box.
How much work does it take to get driving directions? With MapQuest, you need to click on a link to the Directions page, enter your starting street address, hit Tab (or even worse, take your hands off the keyboard, put them on the mouse, and click on the next field), enter your city, hit Tab, enter your state, hit Tab, enter your ZIP Code, hit Tab, and then repeat that Enter-Tab ballet for your destination.
In Google Maps, you enter your starting street address, city, state, and (optional) ZIP Code, then to, and then the street address, city, state, and (optional) ZIP Code of your destination—into the single search box. Would you trade a click and seven tabs or clicks for a single to? I sure would! In addition, Google Maps provides lots of alternatives for asking directions. The usual way is to enter the beginning and ending destinations into the search box
[Hack #2]
.
To get directions from O’Reilly Media to the San Francisco airport, you can enter the starting address and the airport code:
1005 Gravenstein Hwy N, Sebastopol, CA 95472 to SFO
|
You can even get directions from one airport to another. For example, for directions from San Francisco International to Oakland International try SFO to OAK. This pulls up the driving directions shown in Figure 1-14.
When I get driving directions, I’m usually familiar with either the starting or ending location, but not both. Google provides a neat map-within-a-map effect to help navigate that last little bit. If you click on the Start Address or End Address links in the top of the results area on the right of the screen, a mini-map appears in the info window of the starting or ending address (Figure 1-15).
You can also click on the individual steps in the driving directions to get a mini-map for that navigational maneuver. The mini-map that appears is a complete map, with its own zoom (but not pan) controls, so you can position the map, zoom in, and print the map and directions. To add another level of cool, flip the mini-map to satellite view, as shown in Figure 1-16.
We have a friend who lives donde el Diablo se perdido su poncho (“where the devil lost his poncho”), and having this imagery makes it a lot easier to understand what is happening as you traverse miles of single-lane former stage coach roads to pay a visit.
When you search for an address or click on a local link, Google Maps produces the (hopefully) now-familiar info window, as shown in Figure 1-17.
You can click on the info window links to get directions to or from that address. When you click on one of those links, you get a mini search box into which you can type a location, as shown in Figure 1-18.
As mentioned above, you can use any of the methods of entering a location mentioned in “Find Yourself (and Others) on Google Maps”
[Hack #2]
and probably several more that we haven’t found! So you can get the direction from an airport to a city (LAX to Hollywood, CA) or between two ZIP Codes (94305 to 95472), or any combination of the two.
You can even get directions to a latitude and longitude. This can be fun if you are interested in the Degree Confluence Project (http://www.confluence.org/), which is attempting to collect pictures and stories from each of the latitude and longitude integer degree intersections in the world. So you could search for LAX to 34, -118 and get Figure 1-19, showing the closest degree confluence to Los Angeles.
Found something good? Email a link, bookmark it, or post it on your web site.
Are you having a party and needing to let people know where it will be held? Did you find a cool spot that you want to show your friends? Google Maps can create an email with a link that will show your friends (mostly) the same view you see—or generate a link to post on your own web site.
Without maps, many of us are reduced to near-incomprehensible grunts if forced to provide directions to our homes. Even if we’ve lived in the same place for years, our direction-giving process too often includes putting a hand over the phone handset and asking whoever is around, “What is the name of that street?”
The problem doesn’t end there. Even if we are good at providing directions, our would-be visitor must keep track of fragments of data such as “the red mailbox” and “right after the hill—and if you hit the corner, you’ve gone too far.” With online map services, though, most of the time it is enough just to have a street address, and with most, emailing or posting a link to a map helps a visitor find the location quickly.
Figure 1-20 shows driving directions from W 88th St and Broadway, NY, NY to W 92nd St and Central Park West, NY, NY. It also includes a destination mini-map.
Click the Email link just under the line that includes the Map and Satellite links, and Google opens your email client and inserts this link to this map, along with a set of driving directions, in the body of the email:
http://maps.google.com/maps?q=W+88th+St+and+Broadway,+ny,+ny+ to+W+92nd+St+and+Central+Park+West,+ny,+ny&ll=40.789110,-73.966550&spn =0.007782,0.013467&hl=en
All you need to do is fill in the email address of your friend and send it off.
Google Maps makes deep use of JavaScript to dynamically redraw the map without (apparent) requests to the server. This means that the location bar in your browser does not get updated. This only becomes an issue when you decide to bookmark a map to use later.
When you bookmark Google Maps, you find that you’ve bookmarked the overview map of the whole United States—almost certainly not what you intended! Fortunately Google has provided a way out. Next to the Email link, under the Map and Satellite links, is a link to "Link to this page,” as shown in Figure 1-21.
Clicking “Link to this page” updates the address bar in your browser. Now you can bookmark the page in your browser or share the link on del.icio.us [Hack #9] —or copy the link from the address bar and paste it into your own web page. alternatively, you can right-click on “Link to this page” and select Copy Link Location (in Firefox) or Copy Shortcut (in Internet Explorer) to copy the link directly to the clipboard.
To post a link on your web page:
For example, here is a link to a map of Salina, Kansas: http://maps.google.com/maps?q=Salina,+KS&spn=0.124512,0.215467&hl=en.
You could include it in your web page with this HTML:
<a href="http://maps.google.com/maps?q=Salina,+KS&spn =0.124512,0.215467&hl=en">Salina, Kansas</a>
Sometimes, if you just want to paste a URL of a Google Map into an email, you may find that the URLs are just long enough to break in the middle and wrap to the next line in your email client, which may make it more difficult for the recipients of your email to use. Metamark offers a solution to this problem at http://xrl.us/. There you’ll find—no kidding—a link-shortening service, which takes unwieldy URLs like those produced by Google Maps and generates a permanent redirect from a much shorter URL to the much longer one you’re having trouble with. Here, for example, is Metamark’s shortened version of the Central Park driving directions that were shown in Figure 1-20:
| http://xrl.us/hu9c |
When others visit the shortened URL, their browsers will immediately be redirected to the longer URL you started with. You can also choose to use a mnemonic “nickname” in place of the string of random letters after xrl.us in the shortened URL, as well as apply a password to keep your URL under wraps.
The link generated by Email and “Link to this page” produces almost the same view when clicked as you have when you create the links. Sometimes the map is not centered in the same place as when you clicked on the link, as browser window sizes vary, and Google Maps does its best to show the area requested. Occasionally, this may even result in a different zoom level being displayed, in order to make the requested area fit in the available browser window space.
Also, it is quite possible, since Google Local searches appear to be regenerated on demand, that someone using your link could see a slightly different list of businesses than you did when you created the link.
Currently, the link does not save embedded mini-maps, so if you’ve created driving directions and opened up a mini-map at the start or end address, it will not be included in the email or link that you generate.
Maps help us gather together, and being able to communicate with more precision than “drive past the third gate, then turn right” means more people will show up where they want to be, rather than lost by a frog pond (though searching for “lost by a frog pond” brings up an absurd number of links).
Gain control of your links to Google Maps by understanding the URLs.
“Share Google Maps” [Hack #6] showed how to have Google Maps generate a link (i.e., Uniform Resource Locator or URL) that creates a view of the current map. A little exploration of Google Maps URLs can provide a lot of power!
We have no particular inside information, so much of what follows—especially what I think the abbreviated names stand for—is just semi-knowledgeable guesses. Let’s start with a basic URL. This is what you get if you search for Key West, Fl and then click on “Link to this page.”
| http://maps.google.com/maps?q=Key+West,+Fl&hl=en |
The http://maps.google.com part should be familiar. This is the basic Google Maps address. Next, /maps is a program running on Google’s servers that generates maps. Web programs can accept parameters. The syntax for parameters is to start with a question mark and then put the name of a parameter, an equal sign, and the value of the parameter. If you need a second (or third, or more) parameter, you put an ampersand between the first value and the second parameter’s name. So ?q=Key+West,+Fl&hl=en means there is a parameter named q with the value Key+West,+Fl and a parameter named hl with the value en.
Warning
Note that the spaces in “Key West, Fl” have been replaced with plus signs. This is because spaces aren’t allowed in URLs and must be escaped.
The parameter hl is the language for the results, and q is the query, or location that you are searching for. If you speak French, replace the en with fr, and so on. If you leave off the hl parameter, Google Maps will try to display things in whatever language the user’s web browser prefers.
The q or query parameter can be any of the things that are discussed in “Find Yourself (and Others) on Google Maps”
[Hack #2]
. For example, here is the URL to a map for latitude 38 degrees north, longitude 122 degrees west:
| http://maps.google.com/maps?q=38,-122&hl=en? |
Tip
Google Maps follows the convention observed by most web mapping software and Geographic Information Systems, and uses negative values to denote latitude south of the Equator and longitude west of the Prime Meridian.
Here, for example, is ZIP Code 94305:
http://maps.google.com/maps?q=94305&hl=en
The query string for driving directions matches what you would enter into the search box, which is just as you’d expect. Here is San Francisco International (SFO) to Los Angeles International (LAX):
http://maps.google.com/maps?q=SFO+to+LAX&spn=3.984375,6.894949&hl=en
The
spn parameter shows how much territory the map spans. It appears to be the number of degrees of longitude and latitude (in that order) that are shown on the map. The first value appears to be the number of degrees of longitude that are shown to the left and right of the center of the map. The second value is the same for the number of degrees of latitude that are shown above and below the center point.
For example, if the values are 1,1, then about 2 degrees of longitude (about 90 miles from east to west), and about 2 degrees of latitude (around 138 miles from north to south) are shown on the map.
When you search for driving directions, the span of the map is automatically set so that both the starting and ending points are shown. The span sets the zoom level. The fully zoomed-out map has a span of 63.750000, 110.319191, while the fully zoomed-in map is 0.003891, 0.006733 (at least for one sample map—it is likely that this varies with latitude). At this point it doesn’t appear that you can manually enter an even smaller span. The system seems to have a minimum, beyond which it will not go.
Warning
At the equator, one degree of latitude or longitude is equal to about 69 miles, or 111 kilometers. As you go north or south of the equator, the degrees of latitude remain the same, but one degree of longitude shortens to approximately the cosine of the latitude multiplied by 69 miles. So, at 40 degrees north latitude, a degree of longitude is about 46 miles.
Table 1-2 lists the parameters we’ve been able to figure out. Here, for one example, is a search for “pizza” when the span of the map has already been limited to a local area:
http://maps.google.com/maps?q=pizza&sll=38.402193,-122.829009&sspn =0.031128,0.053867&hl=en
The parameter sspn appears to be the search span, and sll is the search’s latitude, longitude center point—so this query is looking for pizza within .031128 degrees of longitude and .053867 degrees of latitude from latitude and longitude 38.402193, -122.829009.
For linguistic reasons, we tend to think latitude and then longitude (i.e., lat/long), but when we draw graphs we think x,y. Latitude maps to the y axis, so to be consistent we’d talk about either y,x graphs or latitude, longitude coordinates. Google appears to have adopted both conventions in expressing geographic coordinates in this URL. People are not consistent, and Google can happily have a URL that specifies the center point as latitude, longitude but the span in x,y.
To see the satellite view, add the parameter and value t=k. Maybe that means type is k? What could k mean? (keyhole, perhaps?) As of August 2005, the letter k and the number 1 both cause a satellite map to appear, and the letter h causes hybrid maps to appear. From experimentation (i.e., trying all the other letters), no other special tricks live in the t parameter. Perhaps the other letters and digits will be used for coming features.
This URL represents a satellite view and driving directions from SFO to LAX:
http://maps.google.com/maps?q=SFO+to+LAX&spn=5.603027,7.481689&t=k&hl=en
Or, to get just the driving directions:
http://maps.google.com/maps?q=SFO+to+LAX&spn=3.984375,6.894949&hl=en
Table 1-2. Google Maps URL parameters
|
Parameter |
Example |
Description |
|---|---|---|
|
|
94305 38,-122 |
Query string. This is what goes into the single search box. |
|
|
en fr |
Language. |
|
|
h k 1 |
Imagery type. Show satellite imagery if set to k or 1 and hybrid maps if set to h. |
|
|
-122.7 38.4 |
Longitude and latitude of the center point of a generated map. |
|
3 |
Zoom level. Ranges from 3 to 18. | |
|
|
5.603027 7.481689 |
Number of degrees of longitude and latitude across the entire map. |
|
|
0.031128 0.053867 |
Search span. Define area to search for local search. Same format as the |
|
|
38.403193 -122.82709 |
Search latitude and longitude. The center point for a local search. |
Another cute thing you can do with Google Maps queries is to add a custom title to the location by putting the title in parentheses after the search location. For example, the following URL shows the location of Google’s headquarters, titled with the word “Google”:
http://maps.google.com/maps?q= 1600+Amphitheatre+Parkway,+Mountain+View,+CA+94043+(Google)
Google Maps is filled with hidden (to us) options. The way to find out what it can do is to experiment! Try different things and to see what it all means, click on “Link to this page” often! You never know what might work—that is the essence of hacking!
“Generate Links to Google Maps in a Spreadsheet” [Hack #8] .
Get a handle on your own data with Google Maps.
What if you could create a private (or public) web page with links to Google Maps for each of the people in your company? Or all the members of your social club or church? You would be able to click on the names of people in your group and pop up a map of their location. Well, you can!
In “Inside Google Maps URLs” [Hack #7] , we examined the structure of Google Maps URLs. Now we will use that information to create links to Google Maps that show your own contacts. We’ll assume that you’ve got your contacts in a spreadsheet program, such as Microsoft Excel, Gnumeric, or OpenOffice Calc.
Figure 1-22 shows a sample data set with a name, street address, city, state, and ZIP Code set up in columns. This spreadsheet is available as http://mappinghacks.com/google/sample_data.xls.
We can go from this format to a full HTML link in Excel. The HTML link for each element will look like this:
<li><a href="http://maps.google.com/maps?q=1005+Gravenstein+Hwy +N.,Sebastopol,CA,95472+(O'Reilly)&hl=en"> O'Reilly & Associates</a></li>
The li tag will put each line in an HTML bulleted list. You will be able to click on the name and pop up a map centered on the address that goes with that person or company.
The first step is to use the concatenation function to put the name, address, city, state, and ZIP Code together in a new column. You can do this by using either the concatenation function or the shortcut & that does the same thing:
=CONCATENATE(B4,",",C4,",",D4,",",E4,"(",A4,")")or:
=B4 & "," & C4 & "," & D4 & "," & E4 & "(" & A4 & ")"
This creates an address that looks like this:
1005 Gravenstein Hwy N.,Sebastopol,CA,95472 (O'Reilly)
|
You’ll note that we use the custom location title trick [Hack #7] to associate the locations on the map with the names from our spreadsheet.
Next, we’ll replace the spaces with plus signs and ampersands with %26 (so they don’t mess up the format of the URL), and then add the q= part of the query. Excel provides the Substitute() function. You give it a string, then the value you want to get rid of, and a new value to replace the old value. In this command I concatenate the q= part of the parameter with the result of replacing the spaces in the combined address with plus signs.
=CONCATENATE("q=", SUBSTITUTE(SUBSTITUTE(F4," ","+"), "&", "%26"))The result looks like this:
q=1005+Gravenstein+Hwy+N.,Sebastopol,CA,95472+(O'Reilly)
Next concatenate the other parts of the Google URL:
=$G$1 & G4
$G$1 is an absolute reference to a cell containing http://maps.google.com/maps?hl=en& and G4 is the cell with our cleaned up query parameters. Note how the order of the parameters doesn’t matter. We can list the q= part first or hl=en first. This gives us the full Google Maps URL of:
http://maps.google.com/maps?hl=en&q= 1005+Gravenstein+Hwy+N.,Sebastopol,CA,95472+(O'Reilly)
We have to make just one little addition in order to get the full HTML that we want:
="<li><A href="""&H4&"""" & ">" & A4 & "</a></li>"
This is sort of ugly because we need to include double quotes (“) in the result, but the double quotes are used as the string delimiter. In Excel you can insert a double quote into a string by entering three double quotes. The result is:
<li><a href="http://maps.google.com/maps?hl=en&q= 1005+Gravenstein+Hwy+N.,Sebastopol,CA,95472+(O'Reilly)"> O'Reilly & Associates</a></li>
Now we want to get those links into our own HTML page. Most spreadsheet programs provide other tools to manage hyperlinks, but the simplest way is to just copy the column by selecting the whole thing with Edit → Copy (or Ctrl-C) and then pasting it into your HTML file.
Open that local file in your browser. You can use the power of the browser without exposing this page onto the Internet. If you are extremely paranoid, you need to aware that you are of course exposing your addresses to Google, which could in theory track address searches by your IP address and do something nasty with that information. Given Google’s written commitment to avoid being evil, that shouldn’t be a real risk.
You can open a local HTML file by selecting File → Open in Internet Explorer, or File → Open File in Firefox. The result is a page of links like those in Figure 1-23.
“Inside Google Maps URLs” [Hack #7] .
Other people want to help you keep up with Google Maps (and anything else)!
What would you say to a world-wide community of people who spend a great deal of effort to maintain a chaotic but powerful set of links to most of the most interesting material that is available on the Web? How about “thank you” and welcome to http://del.icio.us/?
Quoting from http://del.icio.us/doc/about, Joshua Schacter created del.icio.us as a:
…social bookmarks manager. It allows you to easily add sites you like to your personal collection of links, to categorize those sites with keywords, and to share your collection not only between your own browsers and machines, but also with others.
One key to the service is that your collection of links is intrinsically shared with others. So you can use del.icio.us to manage your own bookmarks, or you can just browse other people’s links. Once you create an account by going to http://del.icio.us/register and picking a username and password, you can use the service to bookmark your own links.
A major part of the power of del.icio.us comes from the ability to tag your links. A tag is just a bit of text that you feel categorizes the link. Figure 1-24 shows a page of links that I tagged with the gmaps tag.
Since all bookmarks on del.ico.us are shared, you can look at other sites that people have tagged with the same tags. So if you wanted to see all of the sites tagged with gmaps, you can click on “gmaps from all users” or go directly to this url: http://del.icio.us/tag/gmaps. Or to see the sites tagged with gmap, try http://del.icio.us/tag/gmap. Other people use googlemaps and google_maps, so you can get to those with http://del.icio.us/tag/googlemaps and http://del.icio.us/tag/google_maps.
Once you’ve looked at other people’s links, you will want to create your own. Joshua provided some nifty little bookmarklets that you can drag onto your bookmark toolbar. When you find a page you want to remember, you just click on this bookmarklet in your own toolbar. This will bring up a form like that shown in Figure 1-25. (There are a few different bookmarklets, so yours might look slightly different.)
When you click on the “post to del.icio.us” bookmarklet, it copies the URL and title from the current page and then pre-fills the “post to del.icio.us” form. You then can add an extended description and tags.
If you wish, you can totally ignore the rest of the world and use tags that are only meaningful to you. Or, you can strive to use a set of common and authoritative tags in all of your links.
Well, you could use that set of common and authoritative tags, except that no such thing exists, nor, really, is it capable of existing. The problem of classifying web pages is so difficult that it has driven otherwise brilliant people to near lunacy. And some of those folks were even Perl programmers!
So instead of a set of authoritative taxonomies, del.icio.us allows you to roll your own. In the case of the link shown in Figure 1-24, I decided that the tag gmaps (for Google Maps), fit, since the article is about connecting a GPS to a mobile phone and then loading maps from Google Maps onto the phone.
Of course, gps also fits, since there is a GPS in the system, and mobile phones are mobile, so I threw both of those in as well. Multiple tags are supported, and encouraged; they just need to be separated by spaces.
Why did I use gmaps instead of gmap? This brings up a weakness of these informal taxonomies; sometimes they are too informal, and redundancy creeps in. Did I say creeps? No, redundancy doesn’t creep in, it is thrust in! Heaved in, piled in so that the resulting taxonomy creaks from the weight of repetition.
And it turns out that this overwhelming cruft of repetition just doesn’t matter. The ability for everyone to create meaningful categories that work for them, while allowing everyone to share in this collective taxonomical work, has created a system of incredible power.
Tag-based classification systems are jumping into existence all over the Web. So much so, that they have fostered the term folksonomy to describe these “folk"-driven taxonomies. Folksonomies have thrilling emergent properties, such as automatically generating taxonomies, and providing the data to allow for automatic generation of link clusters. Folksonomies also have weaknesses, and few people are suggesting that professional taxonomy be eliminated!
del.icio.us has lots of cool features, and it is in a state of continual improvement. One of the neat features is that you can subscribe to tags and to users. So if you subscribe to the gmaps, gmap, googlemaps, and google_maps tags, interesting links will just magically appear in your del.icio.us inbox, and you will get continual updates on what is happening with Google Maps.
Our friend (and Mapping Hacks contributor) Mike Liebhold maintains an extensive set of links to geo-related topics: mapping, GIS, GPS, and so on. He created the del.icio.us account starhill_blend as a repository for his absurdly detailed subscriptions to geo-related web sites. Sometimes two-thirds of the posts will be about Google Maps, but he is looking at everything from location-based-game to psychogeography. You can follow this page at http://del.icio.us/inbox/starhill_blend.
As befits a modern data aggregating application, all the interesting pages are also available via RSS content syndication. If you spend a lot of time on the Web and you don’t know about RSS, you can do yourself a favor and save a lot of time by learning about it.
The Google Maps Mania blog at http://googlemapsmania.blogspot.com/ maintains a good ongoing review of all things new and Google Maps.
Developing Feeds with RSS and Atom by Ben Hammersley (O’Reilly).
Get Google Maps Hacks now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
