Linking to Google Maps

Linking to Google Maps

If you've never used Google Maps before, stop reading right now and go open http://maps.google.com in a web browser. Now type in your home or business address in the search box and click the Search button. Click and drag around on the map to move it around in real time. You can also click the little "plus" and "minus" buttons near the left side of the page to zoom in and out of the map. And finally, try switching to a satellite view of the map by clicking the Satellite button, or try "hybrid" mode where you can see a satellite image with streets overlaid. Why am I sidetracking an HTML book with a discussion of Google Maps? Because it's one of the coolest tools on the Web, and you may find it incredibly useful in your own web pages. Figure 3.5 shows Google Maps in action.

Figure 3.5. Google Maps allows you to create links to interactive maps for just about any geographical location.

By the Way For the record, I have no affiliation with Google and get no kickbacks for recommending Google Maps. I've just personally found it to be one of the most amazing online tools out there.

Now that you have a feel for how to use Google Maps, I want to show you how to link to a map in your web pages. This could be useful for providing a mapped location of a business, directions to an important event, or any number of other things. The key to providing a Google Maps link lies in the "Link to this page" option visible on the right side of the map screen (see Figure 3.5). Click this option to view a link to the current map in the address bar of the browser. You can then copy and paste this link from the address bar into your HTML code as the value of the href attribute for the <a> tag. And voilà, you now have a link to an exact geographical location on Google Maps.

Coffee Break If you found Google Maps to be an interesting tool, you'll no doubt want to check out Google Earth at http://earth.google.com/. Unlike Google Maps, Google Earth is an application that you download to your computer. It is considerably more powerful in terms of its imagery, effectively providing you with an interactive, photorealistic view of the entire planet.

As an example, the map in Figure 3.5 shows the location of a restaurant (Café Coco) owned by a friend of mine. If my friend wanted to include a link to a map of his restaurant location on his web site, all he'd need to do is include the following HTML code:

<a href="http://maps.google.com/maps?q=210+Louise+Ave,+Nashville,+TN+37203">
View map</a>

This code uses the text View map as a link to the Google map for Café Coco. This is a great example of adding a heck of a lot of interesting functionality to a web page with very little effort.