×

GIS

Interactive Maps: Custom Features

31 Mar, 2008 By: Andrew G. Roe,P.E.

---

Editing your JavaScript code enables the end user to select a specific location.

Last month I described how to create an interactive map — one that allows you to zoom and pan in real time. These maps can be embedded in Web pages and other personalized documents. This month I'll discuss how to customize an interactive map and allow the end user to select a specific location to map.

Refresher
Let's briefly review what I covered last month. Web pages, typically driven by HTML (hypertext markup language) code, can be used to display a variety of elements, including maps from various sources. For example, the Google Maps application programming interface (API) enables you to add a map to a Web page or other document, and then make it interactive by applying some fairly simple JavaScript code. Other sources such as MapQuest also offer programmable APIs.

The example last month included some JavaScript code that could be cut and pasted into an HTML file and used to generate an interactive map. To customize this further, let's dig a bit deeper into the JavaScript language and the Google Maps API.

JavaScript Basics
First of all, a few highlights about JavaScript. The name JavaScript is actually a bit of a misnomer. It is a scripting language bearing little in common with another programming language called Java. JavaScript was originally developed by Netscape for use in Netscape Navigator. Microsoft developed a similar scripting language called JScript for Internet Explorer. The European Computer Manufacturers Association (ECMA) in 1996 released a standard scripting language called ECMAScript that encompasses both JavaScript and JScript, but most users collectively refer to ECMAScript, JavaScript, and JScript code as JavaScript. I'll follow the common lingo here. Both last month's example and this month's example are technically JScript examples intended to run on Internet Explorer, but I'll call them JavaScript examples.

Scripting languages — unlike full programming languages such as Java, Visual Basic, and C++ — require a host environment in which to run. The host environment acts as either a client or a server. The most common arrangement is to run JavaScript code in a Web browser, which acts as a client. JavaScript can also be used with servers such as Internet Information Server to generate an Active Server Page (ASP), but I won't go there now.

JavaScript is an object-oriented programming (OOP) language, meaning code is stored in one or more objects. In plain vanilla JavaScript, an object can be a window, a form, a text box, or many other controls commonly seen on Web pages.

Google Maps Objects
The Google Maps API exposes additional objects that can be manipulated with JavaScript code. These objects can include the map itself, the map controls for panning and zooming, and many others specific to Google Maps. In JavaScript code, the Google objects are typically prefaced with the letter "G."

The Google Maps API online user guide contains numerous examples of applying Google Maps objects. You can open these examples in a Web browser, and then view the source code to see how they work. To view source code for a Web page in Internet Explorer, open the page, and then click View / Source.

Example Revisited
The example last month demonstrated how to display a map of a predefined area and enable Google's panning and zooming tools to navigate around the area. The predefined area was the Minneapolis–St. Paul area, defined by its latitude and longitude (-93.15, 45). Let's change this example to allow the end user to type in some coordinates and have the appropriate area displayed. You can do this by defining variables for latitude and longitude instead of hard-coding in these values. You can allow the user to enter these values in a prompt box (a JavaScript object), and provide default values as follows:

var Latit = prompt("Enter latitude","-93.15
var Longit = prompt("Enter longitude","45")

This time when you use the Google Maps GMap object and its CenterAndZoom method, you'll zoom based on the latitude and longitude stored in these variables instead of always zooming in to the Minneapolis–St. Paul latitude and longitude.

Let's make one more change to add another GoogleMaps object: the GMapTypeControl. This control allows you to select whether to display a map, satellite image, or a hybrid. You do this with the following code:

map.addControl(new GMapTypeControl());

The complete code for the modified example now appears as follows:

<!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>
        <script
            src="http://maps.google.com/maps?file=api&v=1&key=[your API key]"
            type="text/javascript"></script>
    </head>
    <body>
        <div id="map"
            style="width: 500px; height: 400px; border: 1px solid #979797"></div>
        <script type="text/javascript">


        //<![CDATA[
        var Latit = prompt("Enter latitude","-93.15")
         var Longit = prompt("Enter longitude","45")
        var map = new GMap(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
        map.centerAndZoom(new GPoint(Latit, Longit), 6);


        //]]>
</script>


    </body>
</html>

You can copy and paste this code into a blank text file using a text editor such as Notepad, and then save it with the .HTM extension (i.e., GOOGLEMAPTEST2.HTM).

Open the file in a Web browser, and you will be prompted to enter a latitude and longitude. If you accept the default values, you should again see a map of the Minneapolis–St. Paul area. Enter some new values (within the limits of areas mapped by Google), and you'll see a different area. Once this map opens, you can use Google's panning and zooming tools just as you would on Google's Web site, and you can also choose whether to display a map, satellite image, or hybrid.

If you plan to use an interactive map in a live Web page, you'll need to get a Google key, as described on the Google Maps Web site. And for more complex applications, consider using the Asynchronous JavaScript and XML (AJAX) framework, which exchanges segments of data behind the scenes so that entire Web pages do not have to be reloaded each time data is requested from the server. The Google Maps API is now fully integrated with the Google AJAX loader, which allows you to load one API key for all supported Google AJAX APIs (including Google Maps) and access different Google APIs within the same application.

It all may seem a bit daunting to the novice programmer, but with a little practice, you can create nifty custom applications that leverage the power of interactive maps.