Tuesday, July 22, 2008
Google Maps (http://maps.google.com) is a virtual world map. You can travel to almost any spot on earth, zoom in, and see what it's like there (without all the extra expenses like flight tickets). Google combines such things as location names, satellite or terrain info, panorama photos from street level with data such as user reviews for restaurants, directions, and—for the United States—real-time traffic information. The search box on top is flexible enough so that you can search for both specific cities or countries as well as names of businesses, restaurants, and more.
With a feature called My Maps, you can add your own markers, directions, or areas to Google Maps, and edit your own text for the marker's info box. Google also allows you to grab Google Maps as a programmable widget for your own blog or home page—this is the Google Maps API in action, which has spawned a great many "maps mashups" online.
Google Maps is also available for mobile phones. This includes directions, and, for some cities in the United States, the display of real-time traffic data to help you avoid traffic jams. To download Google Maps for your phone or PDA, visit http://google.com/gmm from your phone's web browser. If your phone is supported, you'll be able to install it over the air.
Take your Google map and run, freeing it from its usual home at the maps.google.com domain.
The easiest way to embed a Google map on your own site is available directly from http://maps.google.com. Just point to any location—you can also zoom in and switch to satellite view, for instance—and then click "Link to this page" on top. A dialog will open that allows you to copy an HTML portion to be pasted into your own site. You can also customize the map size by clicking the "Customize" link in this dialog.
The actual code you end up with consists of an inline frame, among other things. An inline frame is a window within the browser window that contains an external site's service; in this case, Google Maps.
If you are concerned about using HTML that validates, you need to adjust some of Google's HTML attributes, and also set your document type to "transitional." To validate your HTML, enter your home page address into the official validator provided by the World Wide Web Consortium at http://validator.w3.org. This can help alert you to syntax errors in your code. To learn more about HTML and CSS, visit http://w3.org/TR/html4/ and http://w3.org/TR/CSS21/ respectively.