Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Dangers of jQuery and Other Libraries Using Their Own Syntax
Chapter 11 ■ Using Third-Party JavaScript
It is amazing how many day-to-day web-application and web-development tasks you can perform easily and quickly
with jQuery. However, if you handed this document over to a third-party developer for maintenance, she’d have to
know about jQuery or she would be completely lost. This is one of the dangers of using libraries. Instead of relying
on JavaScript syntax and rules, you add an extra layer of necessary knowledge to the process. It is up to you to decide
whether the benefits the library offers are worth that.
Libraries are there to make the development process quicker and easier, not make us dependent on them or
repeat mistakes we’ve made with libraries in the past already—creating applications and web sites that don’t work
without JavaScript.
Next we’ll look at using the Google Maps API to create mapping applications.
Using an API: Adding a Map to Your Site with Google Maps
Google Maps (http://maps.google.com) is probably the web application that got the whole Ajax craze rolling.
It provides the user with maps that can be moved around, zoomed, and—the implementation permitting—even
annotated. You can show the location you want to see as maps, as satellite pictures, or as a mixture of both.
Google allows web developers to use Google Maps on their own web sites by means of an API. To use the API,
you need to sign up for a free developer key at its homepage:https://developers.google.com/maps/. Here you will
also find the documentation and many examples of how to use Google Maps. The key will enable you to use maps on
a single domain or subfolder in this domain. The examples in this chapter use a key that works with localhost, which
means you need to run them in your local server via http://localhost/ and not from the file system.
Once you have obtained the developer key, you can link to the JavaScript that contains all the map’s code in the
head of your document. The “your key” shown in bold should be replaced with the key you obtained from Google:
■ ■Caution This URL might change in the future, so be sure to check the API home page if your examples fail to work
out all of a sudden.
The next step you need to take is to get the latitude and longitude values of the location you want to display.
If you type the location you are interested in into Google and then add the word “latitude” (for example “Saitama
Japan latitude”), you can get the information you need to add to your map code.
When you have the information, you can start adding your own map to your web site. As an example for an
international location, let’s use Saitama Prefecture in Japan. The coordinates are 35.8617° latitude and 139.6453°
longitude. Using this information and the methods provided for you by the API, it is easy to show a map of a nice place
near Tokyo.
You start with an HTML element to contain the map. You can add content in this element that is displayed when
JavaScript is not available or when the browser isn’t supported. This content could be any HTML, text, or even a static
image of the same map. The static image is a nice option to ensure backward compatibility; you just need to be sure
not to tell the user anywhere in the text that the map is dynamic, because it might not be.
www.it-ebooks.info
329