In old maps—drawn on paper—illustrations of dragons were used in all those areas that were yet undiscovered. This visual disclaimer can be roughly translated to, “Looking for territory information in that spot? Why, no one wants to go there; that place houses dangerous beasts!” Today, most of those dragons are gone, at least when it comes to this little planet. And we don’t have problems folding maps any more, either . . . at least when we use online mapping services like Google’s.

Google Maps


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.

Special layers—so-called KML (Keyhole Markup Language) files—can be displayed on top of Google Maps to add third-party information.

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.

Google Earth

Google Earth (http://earth.google.com). It is is the desktop sibling of Google Maps. After launching it, you’ll see that its rotating 3D globe is a bit more fluid than the flat 2D view of Google Maps. Google Earth in its basic version is free, but the paid version lets you generate videos with effects such as seamlessly zooming in to a location—the kind of effect you’d see in TV news coverage.

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.


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.

For more control over what your map does and how it appears, you can use the Google Maps API (Application Programming Interface). In addition to understanding basic HTML, you’ll need to know some JavaScript.

To get started with the Google Maps API, head over to http://code.google.com/apis/maps/ and click on “Sign up for a Google Maps API key.” Read and agree to the terms of service (if you do agree), enter your home page address, and click Generate API Key. Not only will you get your key now—don’t forget to make a copy of it for future use—but Google also offers you some sample map code to begin with.

Let’s analyze the code, shown here:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/> <title>Google Maps JavaScript API Example</title> <script src=”http://maps.google.com/maps?file=api&v=2&key=YOUR-KEY” type=”text/javascript”></script> <script type=”text/javascript”> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(“map”)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } //]]>


</script> </head> <body onload=”load()” onunload=”GUnload()”> <div id=”map” style=”width: 500px; height: 300px”></div> </body> </html>


This HTML will output a blank page with nothing but a small map widget on it. In the head section of the HTML, you will see that the Google Maps JavaScript library is referenced (replace “YOUR-KEY” with your actual key value). The body includes a div element. In HTML, div is a generic divisor to wrap just about anything you can think of; in this case, it wraps a map. The body element also defines an onload event that involves the function load(), which runs after the page finishes loading its HTML and images. In the load() function, you can see that there’s a small check to confirm that the browser is compatible with Google Maps widgets. If that is the case, a new map object is created—it looks for the previously mentioned div element with the id “map”—and centered to a specific latitude/longitude location, with a specific zoom level.

So far, there’s nothing in this sample that an embedding of a simple map inline frame, as shown before, doesn’t achieve as well. But once you understand this basic example, you can add advanced features by reading through the tutorials, documentation and examples available at http://code.google.com/apis/maps/documentation/.

For instance, let’s say you want to drop a marker of your own on the map. Below the map.setCenter() command in the previous example, you can write the following JavaScript to do so:

var point = new GLatLng(37.4313, -122.1229); map.addOverlay(new GMarker(point));


Or perhaps you want to add an info window when the user clicks on the map. A so-called event listener can be defined for a result like the one pictured in Figure 11-7:

GEvent.addListener(map, “click”, function() { map.openInfoWindow(map.getCenter(), document.createTextNode(“Thanks for clicking!”)); }); Because these programmable widgets can interact with your own site’s data in new ways, they are also called “maps mashups.”

At this time, Google Earth has the most complete support for Keyhole Markup Language information files—including support for animations. Many organizations have data overlays that you can superimpose on the globe by checking the respective boxes of the Layers pane. A Wikipedia layer adds location-relevant information from the online encyclopedia; the Weather layers allow you to display clouds and forecasts; National Geographic magazine provides a layer with regional information, including photos, as well.

Google SketchUp

Google SketchUp (http://sketchup.google.com) is a 3D program for architects drafting their work, or hobby designers interested in creating a 3D shape. Like Google Earth, SketchUp is not a web application, but instead requires you to install an “offline” client.The emphasis of SketchUp is on ease of use; although you may not be able to do anything and everything with it, what you can do can often be done very quickly, with little effort. And whatever 3D model you create in SketchUp, you can then include in Google Earth.

A great way to start learning about SketchUp is to follow the online video tutorials at http://sketchup.google.com/tutorials.html. Once you’ve created something unique and interesting, you can upload it to the Google 3D Warehouse site, a directory of shared 3D models. You can also import any model you find at the 3D Warehouse into your own creations.


Drop a Google Map Onto Your Site


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: