Online Mapping with Google Maps API v3

Michael Peterson, Chair, International Cartographic Association Commission on Maps and the Internet University of Nebraska at Omaha

Introduction Introduced in 2005, Google Maps has transformed the online mapping. No longer dependent on a simple and slow server-client relationship, Google Maps uses a more interactive, tile- based system based on AJAX to present an online map that allows for highly interactive panning and zooming. In 2006, the Google Maps Application Programmer Interface was introduced that facilitated the creation of Map Mashups the mapping of data from online sites. Map Mashups have had a major impact in how spatial information is communicated. This workshop examines online mapping APIs from Google, Bing and Yahoo. Specific examples are presented using the Google Maps API that involves the mapping of point, line, and area data. Both in-code and GeoRSS data will be mapped. All examples use an HTML/JavaScript interface to the Google Maps API. Some familiarity with HTML and basic programming concepts - objects, arrays, loops - is expected. After a short overview, the workshop will be conducted in a hands-on fashion. Participants will connect to the Internet using their own laptops and download a zip file with all of the course materials. A Windows program will be installed to edit the HTML/JavaScript code. Participants will need to have the access privilege on their own laptop to install programs. Most of the workshop will involve understanding how various Google Maps API routines are called and how they are used to make customized maps. Participants will be given a complete hand-out and all necessary coding examples.

Mashups Mashups are an integral part of what is commonly referred to as Web 2.0. Introduced in 2004, Web 2.0 represents a variety of innovative resources, and ways of interacting with, or combining web content. In addition to mashups, Web 2.0 also includes the concept of wikis, such as Wikipedia, blog pages, podcasts, RSS feeds, and AJAX. Social networking sites like MySpace and Facebook are also seen as Web 2.0 applications. Central to mashups are Application Programming Interfaces (APIs), online libraries of functions that are made available at no cost to website designers. Many different API libraries have been written for the user-driven web. APIs are the tools that facilitate the fusion of data and resources from multiple web resources by providing tools to acquire, manipulate and display information from a variety of sources. In a strict sense, a map mashup combines data from one website and displays it with a mapping API. The term has come to be used for any mapping of data using an API, even data supplied by the user. It should not be surprising that maps figure prominently as mashups. There is a great deal of data presented on web pages that has a locational component. The relative ease of overlaying all types of information with online mapping tools has further transformed cartography from a passive to an active enterprise. 2

The advantage of using a major online mapping site is that the maps represent a common and recognizable representation of the world. Overlaying features on top of these maps provides a frame of reference for the map user. A particular advantage for thematic mapping is the ability to spatially reference thematic data. To emphasize patterns, thematic maps have limited the display of spatial reference data such as the location of cities and transportation networks. This chapter demonstrates the use of the Google Maps API, the most commonly used API for mapping. Other APIs exist for other online mapping, including those from Yahoo and Microsoft, and all are in a continual state of development. Most APIs are designed for use with JavaScript. Before examining mashup procedures with Google maps, it is important to examine programming with JavaScript in more detail.

JavaScript JavaScript, introduced briefly in the last chapter, is a compact, object-based language for developing client-side applications. It is not a computer language that makes executable code, like C++ or Java. Rather, the browser interprets JavaScript statements that are embedded in, or referenced from, an HTML page. The JavaScript program is executed when the browser page is opened. This was initially viewed as a problem because it slowed down the execution of the program. Compiled programs execute more quickly. Computers are becoming faster so there is no longer a major advantage to pre-compiling computer code. From a commercial standpoint, the major disadvantage of JavaScript is that the code is open and readable. Anyone can view the JavaScript code by simply choosing Page Source or View Source from the browser. This, combined with the lack of a debugging program and slow processing speeds, has limited the acceptance of the language, although most major websites use some form of JavaScript. The language is ideal for educational purposes because the code is freely accessible and functions can be easily integrated. The example in Figure 1 defines a simple function in the HEAD section of an HTML document. The function is then called in the BODY of the document. The function square takes one argument, called number, and the function consists of one statement: return number * number

that indicates it should return the argument of the function multiplied by itself. The return statement specifies the value that is returned by the function. Code function square(number) { return number * number } Result

The function returned 25.

3

document.write("The function returned ", square(5), ".") All done.

All done.

Figure 1. This function squares the number passed to it by a call to the function.

Rather than embedding the JavaScript in the HTML file, either in the BODY or the HEAD, it is possible to place the JavaScript functions within a separate file. The SRC attribute of the tag specifies the external file where the JavaScript code can be found. Figure 2 shows the external file called 7-4common.js and how it is referenced in the HEAD part of an HTML document. The external JavaScript file may contain multiple functions but no HTML code. function square(number) { return number * number } Referencing a file of functions document.write("The function returned ", square(5), ".") All done.

Figure 2. A function is placed into an external document, 7-4common.js. The function is then referenced from the HTML file with .

Objects

Objects are combinations of functions and data all packaged under a single name. Each object has properties, methods, and event handlers. An object named car, for example, would possess properties such as make, model, year, and color. Methods might be attributes like go and stop. An event handler includes pressing a button or moving the mouse over a link. JavaScript incorporates several built-in objects. Figure 3 demonstrates the use of the date object. 4

Code function Time() { var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() var seconds = currentTime.getSeconds()// call the AddZero function to add a zero in front of numbers that are less than 10

Result 19 hours 23 minutes 06 seconds

hours = AddZero(hours) minutes = AddZero(minutes) seconds = AddZero(seconds)// write out the time

document.write("" + hours + " hours " + minutes + " minutes " + seconds + " seconds ") } function AddZero(i) { if (i

28

Figure 18. A Heatmap generated from the density of points defined in a Fusion Table.

Yahoo Maps and Bing Maps Competing with MapQuest, Yahoo! provided an online mapping service that used the older client/server model. The server responded with a user-requested map that was embedded within a web page. Soon after the introduction of Google Maps in 2005, Yahoo changed its online mapping service to incorporate an AJAX-type interface that worked with Flash. By 2006, Yahoo! had released its own API. The Yahoo! Maps API is much the same as Googles implementation but does not support polygons and requires the use of an electronic key. In mid-2009, Microsoft re-labeled its Live Local web mapping service to Bing Maps, a part of the companies search engine services. Bing Maps includes a street map, an aerial view, Birds- Eye view, StreetSide view, and 3D Maps. The oblique Birds Eye view has more detail than Googles satellite view. In contrast to the Yahoo! Maps API, Bing Maps does support polygons. Figure 19 compares the code between Yahoo! and Bing maps.

29

Figure 19. Example of code for Yahoo! Maps API and Bing Maps API.

30

Mapstraction Mapstraction is an open-source library that provides a common API for various JavaScript mapping APIs. The purpose is to make it possible to easily switch between the different APIs without having to worry about the unique implementation. The example in Figure 20 shows a Mapstraction implementation that creates a map with six different mapping APIs. .mapstraction { height: 100%; width: 100%; z-index: 1; } #map_select { bottom:40px; left:25px; position:absolute; background-color:white; padding: 5px; border:2px solid black; z-index: 1000; } // initialise the map with your choice of API var mapstraction = new Mapstraction('google','google'); // create a lat/lon object var myPoint = new LatLonPoint(38.8971, -77.070857); // display the map centered on a latitude and longitude (Google zoom levels) mapstraction.setCenterAndZoom(myPoint, 13); // create a marker positioned at a lat/lon my_marker = new Marker(myPoint); // add info bubble to the marker var text = "Rock it out at JSConf!"; my_marker.setInfoBubble(text);

31

// display marker mapstraction.addMarker(my_marker); Google
MultiMap
Yahoo
Microsoft
OpenStreetMap
MapQuest

Figure 20. An implementation of Mapstraction, an open-source API that provides a common interface to multiple online mapping sites.

32