Enhancing Your Web Site


Get started enhancing your Web site with the tools and application programming interfaces (API) found at http://code.google.com. Build Web services, create full applications that talk to Google services, and interact with your users by building gadgets or custom Google Toolbar buttons (my personal favorite).

Google Maps API

Your Web site can use the power of Google Maps to show people how to find you, the way to the family picnic, or your favorite historic sites. The Google Maps API lets you use JavaScript to embed a Google map right in your own Web page. You can additionally customize the map using markers, polylines, and shadowed information windows.

You need a key to get started. You can apply for your key at www.google.com/apis/maps/. Click the Sign up for a Google Maps API key link at the top of the page.

Each key you sign up for is good only for a single directory on your site. This means that if you have a directory at www.mysite.com/contact, then this key is good for all pages found in the contact directory. If you have a second directory that needs the Google Maps API, such as www.mysite.com/birdmigrations, then you need a second key.

There are no limits to the number of requests your site can make to Google Maps for a map display, but there is a limit to the number of geocode (address location) requests to 50,000 requests per day.

You’ll be happy to know that the Google Maps API does not include advertising. Along the same lines, Google does not allow you to charge others to view these maps. If you have an application for the maps and want to charge, check out Chapter 37.

After you sign up for your API key, Google provides a sample Web page to get started. Figure 39.1 shows you the sample, modified to show the Orchidland area on the Big Island of Hawaii. If you are unsure of your latitude and longitude, try using Google Earth. The API uses a different format for latitude and longitude than the values Google Earth displays. The U.S. government to the rescue! Point your Web browser here: www.fcc.gov/mb/audio/bickel/DDDMMSS-decimal.html.

image from book
Figure 39.1: Modify the sample code to get started with maps quickly.

The FCC has a simple converter you can use. Here is the sample code used to generate Figure 39.1:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>     <meta http-equiv="content-type" content="text/html; charset=utf- 8"/>     <title>Map to our house on Oliana Street</title>     <script src="/books/2/150/1/html/2/http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIA... QChi6Cg"       type="text/javascript"></script>     <script type="text/javascript">     //<![CDATA[     function load() {       if (GBrowserIsCompatible()) {         var map = new GMap2(document.getElementById("map"));         map.setCenter(new GLatLng(19.58277, -155.0395), 13);         map.addOverlay(new GMarker(19.58277, -155.0395));       }     }     //]]>     </script> </head> <body onload="load()" onunload="GUnload()">   <div  style="width: 500px; height: 300px"></div> </body>

Note 

The key in the previous example was modified for security reasons. Your key will be much longer.

Google Webmaster Tools

Google’s Webmaster Central is a hub of information for Web developers. There are links to the Site Status Wizard to learn whether your site has been indexed. There is a link to the Webmaster tools, commonly known as Sitemaps. You can also learn more about submitting information to Google Base and the Book Search. Most important, you can stay on top of current Google developer information by subscribing to the Google blog for Webmasters and join the Google Group for Webmasters. You also may find the Webmaster help center useful. To find Webmaster Central, point your Web browser to www.google.com/webmasters/.

When you use Google’s Sitemap tool, you can add a list of your Web sites and use the Google Webmaster tools. Log in to your Google account and navigate to www.google.com/webmasters/sitemaps/siteoveview.

In the upper-right corner of this Web page, you see a + Tools link, where you can do these things:

  • Download data for all your sites

  • Report spam in the Google Index

  • Submit a reinclusion request

Additionally, you can see crawl stats, query stats, page analysis, and index stats by clicking the Statistics tab. If your site is having problems getting indexed, click the Diagnostics tab for help in determining the probable cause of indexing problems. There could be problems with a robots.txt file or any number of other problems.

Google Web Toolkit

If you’ve seen the pages where portions of the page update without reloading the entire page, like Google Maps, you’re looking at an application written in AJAX, sort of Javascript on steroids. The Google Web Toolkit lets you build powerful front ends to your Web site using the Java programming language and the Google Web Toolkit framework. Then the Google Web Toolkit (GWT) compiler converts the Java classes into Javascript and HTML.

When developing your application in Java, you use the GWT user interface components known as widgets. Combine the widgets on traditional Java panels. Here is sample button code that launches a window alert:

 public class MyButton implements EntryPoint {   public void onModuleLoad() {     Button btn = new Button("I am a button", new ClickListener() {      public void onClick(Widget sender) {        Window.alert("I have been clicked");      }     });     RootPanel.get().add(btn);   } }

There are two modes in which your Google Web Toolkit application can run: Hosted mode and Web mode. Hosted mode applications are run as Java and use the Java Virtual Machine. Web mode applications are converted to Javascript using the GWT compiler and run strictly as Javascript and HTML; no Java is included in the page.

For more information and detailed instructions on using the GWT, visit code.google.com/webtoolkit/overview.html.

Google AJAX search API

Now that you know a little about AJAX, you’ll be happy to know that Google has made it easier to build applications on top of the Google Search technology. The Google AJAX search API also helps you add dynamic search boxes for Google Web, Video, News, Maps, and Blog search results.

As with the Google Maps API, you need to have Google generate a key. Point your Web browser to http://code.google.com/apis/ajaxsearch/.

Click the Sign up for a Google AJAX Search API key link. Agree to the license agreement, and type the URL that will host the AJAX Search code. Then click Generate API Key. Also like the Google Maps API, Google provides you a sample page, with the results shown in Figure 39.2:

 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml 1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>     <meta http-equiv="content-type" content="text/html; charset=utf- 8"/>     <title>My Google AJAX Search API Application</title>     <link href="http://www.google.com/uds/css/gsearch.css" type="text/c ss" rel="stylesheet"/>     <script src="/books/2/150/1/html/2/http://www.google.com/uds/api?file=uds.js&amp;v=1.0&am p;key=ABQdaX_wm1K- Q6KdSr5G7WhQDZiGdv9tL82_8S5e2Pd_QChi6Cg" type="text/javascript"></scrip t>     <script language="Javascript" type="text/javascript">     //<![CDATA[     function OnLoad() {       // Create a search control       var searchControl = new GSearchControl();       // Add in a full set of searchers       var localSearch = new GlocalSearch();       searchControl.addSearcher(localSearch);       searchControl.addSearcher(new GwebSearch());       searchControl.addSearcher(new GvideoSearch());       searchControl.addSearcher(new GblogSearch());       // Set the Local Search center point       localSearch.setCenterPoint("New York, NY");       // Tell the searcher to draw itself and tell it where to attach       searchControl.draw(document.getElementById("searchcontrol"));       // Execute an initial search       searchControl.execute("Google");     }     //]]>     </script>   </head>   <body onload="OnLoad()">     <div />   </body> </html>

image from book
Figure 39.2: Place the dynamic Google Search anywhere on your Web page.

Note 

The key in the code above has been abbreviated for security reasons. Google will create this same sample for you with a key that works on your own Web site.

You will find the complete documentation for this API at http://code.google.com/apis/ajaxsearch/documentation/.



Google Power Tools Bible
Google Power Tools Bible
ISBN: 0470097124
EAN: 2147483647
Year: 2004
Pages: 353

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net