For the first decade or so of the World Wide Web's existence, mapping sites like Mapquest were held back by the fact that anytime the user wanted to zoom in/out or even just pan a bit in some direction, the whole page needed to be re-loaded. While these sites were still useful, their lack of responsiveness caused by the delay in waiting for data to stream from the server to the client machine clearly limited their effectiveness and frustrated users.
The Google Maps API is made possible by the use of Ajax programming. When a user views a Google Maps page, tiles of map data are passed from the Google server as XML and translated into imagery on the user's machine. As the user pans around the map, the tiles that are just outside of the visible portion of the map are downloaded behind the scenes. This is what allows the seamless panning that Google Maps is probably best known for.
Be sure to test Mike's page to see the Ajax technique at work. His page makes it possible to view three separate sets of markers by clicking on the A, B, and C buttons just below the map. Note how quickly the markers and sidebar text are updated when one of the buttons is clicked. This responsiveness is achieved because the page is only requesting the data required to plot the new points and update the sidebar. A non-Ajax page would ask the server to send back all of the HTML required to display the desired page - even the parts that are not changing - and would not load as quickly. (While Mike's example is written for V2 of the API, you should still be able to follow its use of Ajax.)
To further illustrate the concept of Ajax programming, let's take a look at a database-driven mashup that I've written. If you choose to complete the optional Lesson 6, you'll learn how to build your own database-driven mashup through the use of MySQL and PHP. My example uses these technologies to map the locations of students in the PSU online GIS (Certificate and Master's) programs by their zip codes.
The page plots the US and Canadian students in our various online geospatial programs in different colors. Clicking on a student's hometown will zoom to that location and open the associated info window. By default, the map will display all of the students enrolled in the most recently completed term. However, any term going back to the launch of the Certificate Program in Winter 1999 can be selected from the drop-down list just above the map.
Without going into too many details on the syntax of PHP, let's have a look at the PHP script to give you a sense of how it works. (This is a version of the script saved in plain text format so that you're able to view its source code. If I hadn't posted this plain text version, you would only be able to see the script's output and not its source code. This is one of the big differences between client-side and server-side scripts.)
Note that all PHP variables begin with the dollar sign character ($). The first three lines of the script open a connection to the MySQL database. The $term statement retrieves the value that was passed to the script through the URL (e.g., 201303) and stores it in a local variable. That variable is then plugged into the WHERE clause of a long SQL SELECT statement that brings together the desired data from three tables. That query string is then used as the argument to a function that executes the query. A for loop is eventually used to process the query results one row at a time, but first an important line known as a response header is added to indicate the type of data that will be returned by the script:
The script's output is created using a series of echo statements. The start tag for the root <students>element is echoed before the loop and its end tag is echoed after the loop. Within the loop itself, the various XML start and end tags are echoed with the appropriate values from the current row inserted in between. Note that the concatenation character in PHP is the period. Don't worry if you had trouble following what's going on in the PHP script. You can learn more about it in Lesson 6.
The next bit of code removes all of the markers from the map (if there are any) and empties the markers array. These statements are necessary because this function is going to be called each time the user selects a different term from the drop-down list. Without them, markers from previously selected terms would remain on the map each time a new term is selected.
Next, note how the PHP script is plugged into the call to the downloadUrl() function. The complete URL is created by appending the term value originally passed into the function to the static beginning of the URL. The rest of the code in the load()function is written much like the Jen and Barry's example from earlier in the lesson.
Skipping down to the page's <body> section, recall that the div with id "heading" has its text set by the load() function.
Next, two <table>s are used to arrange the information below the headings. The first is used to show a key to the marker symbols, the term drop-down list, and a count of the number of students being mapped. The second table contains the sidebar and the map.
Note that the third cell in the first table contains an HTML <form> element and within that form element is a <div>. This div will have its innerHTML property set to a <select> element (the drop-down list) by code found in the init()function.
After the setting of the last_term variable comes a critical statement. A variable called drop_down is created to hold the HTML for the drop-down list. The critical part of this statement is the setting of the onchange attribute to execute the load() function. The DOM is used to specify that the text of the option selected by the user should be passed to the load() function. Thus, if the user changes the selected option in the drop-down list from 201303 to 201302, the load() function will be called and passed the value 201302.
After that initial bit of HTML defining the <select> element, two loops are used to create the options associated with that element. The first loop adds all terms that have been completed in the current year. The second loop adds all terms for every year going back to 1999. This code is complicated by the fact that we switched from 4 terms per year to 5 terms per year in 2013.
After the loops, the HTML required to close the <select> element is appended to the drop_down variable. That variable is then finally used to set the innerHTMLproperty of the appropriate <div>.
The next statement adds the map and sets its center and map type.
The last line of the script makes the initial call to the load() function, passing it the most recently completed term, as computed from the current year and month.