Ajax-Powered Google Maps Mashup Tutorial

by Peter Laird
05/30/2007

Editor's Note: This tutorial is a companion to Dev2Dev TechDays 2007, which has a theme this year of Mashup the Enterprise. The seminar covers how mashups can be used effectively within the enterprise, and offers more details on the technologies presented in this tutorial. The seminar is being offered worldwide, so check out the TechDays Web site to see when the seminar is coming to a city near you.

Abstract

A new era of Web development is in full swing, and it is called Web 2.0. This has ushered in a new set of prototypical Web applications, including blogs, wikis, and mashups. Mashups are the focus of this tutorial, and you will see how a sample mashup can be built using a common set of technologies. This set includes JavaScript, Ajax, REST, JSON, and the Google Maps API. As a Web developer, it is important to understand how these tools fit together. In this tutorial I'll use these tools to easily build what is the ultimate Hello World mashup: a Google Maps mashup.

Introduction

A mashup is created when several data sources and services are "mashed up" (combined) to create something new, or add value in some way. This tutorial shows how to create a Google Maps mashup—combining the mapping data supplied by Google Maps with a location data service that you can build yourself.

The tutorial is structured in three parts:

  • The Web 2.0 Toolbox
  • Retrieving Locations from a REST Data Service
  • Plotting Addresses with Google Maps

The first section covers the technology that I will use to build the mashup in the second and third sections. For a look ahead at the demo that I will build, navigate to the hosted demo on the Web.

Let's get started!

The Web 2.0 Toolbox

Web developers know that technology is always evolving, and skills can become obsolete in just a few years. I wouldn't have it any other way: innovation is what makes Web development interesting. New ideas, new tools, and new technologies allow us to build better systems in a shorter amount of time. This section covers a number of technologies that you may or may not have used. If these are new to you, consider this section a quick introduction, and I would encourage you to follow up with deeper study. The descriptions below are by no means complete, and in some cases overly simplified so as to convey the important concepts.

While I will discuss a handful of technologies, this tutorial has to start somewhere. It is assumed that you are comfortable with the following concepts and Web technologies:

  • HTML
  • XML
  • The role of browsers and Web servers
  • The HTTP request/response model
  • A modern programming language, like Java, JavaScript, PHP, C#

Client-side Programming

A hallmark of a Web 2.0 application is that it is highly interactive—responsive like a traditional desktop application. The staid feel of a traditional Web application, with lengthy pauses for full-page refreshes, cannot live up to this expectation. Therefore, Web 2.0 applications make use of client-side programming technologies to help make the application feel more responsive. The two most popular client-side technologies are JavaScript and Adobe Flex. Both have compelling features and both can be used with great success. However, to narrow the scope of this tutorial, I will look only at the JavaScript approach when building the mashup.

JavaScript is no toy. It is a powerful client-side programming language that has certainly come of age. Cross-browser support has improved dramatically as standards have evolved, making it a viable choice. For those new to the language, you will find its basic code constructs similar to other mainstream languages like Java.

A powerful event mechanism is included to enable JavaScript to respond to user interactions in the browser. I will rely on the eventing capabilities to build the mashup later in the tutorial. Students of HTML have likely already seen the JavaScript eventing mechanism in the form of events such as the onclick attribute, as in:

<onclick="javascript:myEventHandler(); return true"

     href="myURL.html">My Link</a>

Another important feature of JavaScript when executed in the browser is its ability to manipulate the HTML Document Object Model (DOM). This feature allows JavaScript code to programmatically alter the contents of an HTML page after it has been loaded. DOM manipulation is an important feature to use when increasing the interactivity of a Web 2.0 application. In Web applications, it is common to reset the text contained by an element in the HTML, as in:

// find the <div> tag with id 'greet_div'

var div = document.getElementById('greet_div');

div.innerHTML = 'Hello ' + name;

The final JavaScript feature that must be mentioned is its ability to issue out-of-band HTTP requests to back-end servers. As a result, JavaScript can issue requests that do not cause the page to reload or change the address bar of the browser. This feature is commonly called Ajax, but the source of this feature is the XMLHttpRequest which is the JavaScript class that can invoke the HTTP request. The HTTP requests generally are asynchronous, which requires the programmer to define a callback function to be called when the response is received.

var request = new XMLHttpRequest();

function invokeAjax() { 

        request.open("GET", 'ajaxTarget.html', true);

        request.onreadystatechange = ajaxCallback;

        request.send(null);     

} 



function ajaxCallback() {

  // check if response is complete, then do stuff       

}

I cannot consider the XMLHttpRequest feature covered until I discuss one major limitation that will affect its ability to be used in mashup applications.

To protect users from malicious code writers, a safety feature is present in all browser implementations. The Same Origin Policy prevents an XMLHttpRequest from targeting a server in any network domain other than the network domain that provided the page. For example, if the user browses to http://www.bea.com/ajaxPage.html, the JavaScript code on that page could not issue an XMLHttpRequest to http://www.evil.com/stealCookies.html. While this safety feature protects users, it limits the role of client-side JavaScript programming in mashup applications that need to consume services from multiple domains. However, two resource types are immune to this policy: a page can load cross-domain images and scripts. By being clever with appending parameters to these resource requests, some implementations have worked around the limitation.

For more details on Ajax and XMLHttpRequest, see An Introduction To Ajax (Dev2Dev, 2005).

Lightweight Services

The ability to invoke a remote service is the cornerstone of distributed architectures in the enterprise like Service Oriented Architecture (SOA). Web service technologies such as SOAP have been widely adopted to create reusable services within the enterprise. These implementations work well, but in some cases SOAP is overkill. Especially when the client is a browser, a lighter-weight solution is wanted.

An approach to building lightweight services called REST has become popular, especially with Web 2.0 applications. REST offers a clean model for building HTTP addressable services that are easily invoked from a browser. While a full academic definition of REST is not appropriate for this tutorial, I can summarize with a few bullet points:

  • The REST service is expressed as a URL and is accessed with basic HTTP requests, such as http://bea.com/content/getArticles?author=joe.
  • The HTTP verb is important: a GET is a read operation, POST is a creation, and PUT make updates to the service.
  • The return payload is usually XML or JSON.

Trying to be any more specific to the meaning of REST will likely breed controversy, so the above characterization will suffice.

The last bullet point requires further explanation. Two options are listed as popular formats for the return payload: XML and JSON. XML would seem to be the format of choice, as it is widely used throughout the world. However, while REST services can certainly return XML, the client JavaScript code will need to walk the DOM of the returned XML to extract the information it needs. This is okay, but for cases where the client will likely be JavaScript in a browser, another option exists. JavaScript Object Notation (JSON) is a JavaScript object serialization format that eases the job of the client. The client can make one call to deserialize the returned JSON text into a native JavaScript object, which then can be manipulated using standard JavaScript syntax. This is often an easier approach, and therefore JSON is popular for REST services that are consumed by Web 2.0 applications.

Here is an example of a JSON object in serialized form:

{"location":    

        {"id":  "WashingtonDC",                 

         "city": "Washington DC",                       

         "venue": "Hilton Hotel, Tysons Corner",

         "address": "7920 Jones Branch Drive"

        }

}

For a great description of JSON, see An Introduction to JSON (Dev2Dev, 2007).

Pages: 1, 2

Next Page »