Section 13.6. Google Maps
13.6. Google MapsOne of the most famous Ajax/DHTML/JavaScript applications is Google Maps. It became even more popular when the company released an API that enabled people to quickly and easily add sophisticated mapping to their web pages. This one application, more so than probably any other, is what fires the imagination regarding Ajax and the ability to mix and mash technologies. It's not unusual for people to record the longitude and latitude of a photograph's location into that photo (a process known as geocoding), which is then parsed out and passed to a Google Maps API call. A map is then created to show exactly where the photo was taken. Geocachers, that group of passionate global positioning satellite (GPS) users, utilize Google Maps to mark geocaches (hidden objects of little or no value used as a way to mark the spot). Others use Google Maps to provide driving directions, to mark landmarks, or even play games. It's a rich and easy-to-use API. To use Google Maps, you first need a free API key, which you can get at the Google Maps API web site (http://www.google.com/apis/maps/). This is used as part of the URL given in the src attribute of the script tag. For instance, the following shows how I use my key for learningjavascript.info: <script src="/books/4/327/1/html/2/http://maps.google.com/maps?file=api&v=2& key=ABQIAAAAprpnCG3LM_SOd5dAqo4g7RThwcj_1x2ShM2_WlFws98yyiZZxRQyUhBJw9Ty1j6jpEUo_v6PFZfJdQ" type="text/javascript"></script> That key has to match the exact domain and subdirectory location where you plan on putting your Google map pages. It's very picky. There's an extensive set of examples and documentation at Google, and I won't take the time to cover what the company covers so well. When the key is generated, Google even gives you a small application you can use to start your development. That's what I'll use. Google's small example just gives a map in a box, with no controls. I'll add on some functionality to create an application that puts markers on the page when the reader clicks the map, and displays an information window with the longitude and latitude. I'll also direct the map to the location of one of my favorite objects, the St. Louis Arch. It looks very impressive in the satellite view. In Example 13-7, a new Google Maps object is created, passing in the DIV element in the page where the map will be located. Once created, two controls are added: one to zoom in or out in the map and one to switch between map, satellite, and hybrid views. Given the latitude and longitude, the map is then centered in St. Louis. Once centered, an event listener is added for the click event on the map element. An anonymous function (all this should look familiar to you, because we've covered everything used so far) is attached to the event listener to test that the point where the click occurred already has a marker. If it does, it's removed. If not, one is placed, and an information window is opened above it, with the latitude and longitude of the point. Example 13-7. Working with Google Maps
Google Maps supports Ajax XMLHttpRequests, including the various formats discussed in this chapter. Finally, Google Maps uses function closures. To prevent memory leaks, replace the body opening script tag with the following: <body onunload="GUnload( )"> This removes the circular references that can lead to leaks. Do take some time to enjoy Google Maps, and also make sure you click the satellite view with this examplethe Arch is impressive. Now that you're sold on web services, DHTML, and Ajax, we'll look in the final chapter at what others have been doing with JavaScript and how you can incorporate what they've created into your own applications. |
EAN: 2147483647
Pages: 151