Google Maps
Christopher G. Healey

Introduction

This module will introduce you to web programming with Google Maps. We will discuss the HTML5, CSS, and JavaScript needed to generate a basic Google Map inside a web page you publish. We will demonstrate how to customize your map, and how to annotate it with SVG (scalable vector graphics) glyphs to visualize geographic or geolocated data.

This tutorial assumes a working knowledge of HTML5, CSS, and JavaScript, as well as the ability to edit code on your laptop.

Setup

In order to use the Google Maps API, you need to request an API key from Google. Google's Maps API v3 web page has detailed instructions on how to to this.

Normally we would create, edit, and store files on a web server. This allows anyone using a web browser to load and display our HTML files. For this tutorial, however, you will create, edit, and store HTML files on your local hard disk. You will then use your web browser to open the files, which loads and displays them.

Basic Maps

A basic Google Map is programmed in a file in two parts: an HTML part to describe the layout of the web page and its contents, and a JavaScript part that creates the Google Map within the web page.

Here is the basic HTML that's needed to build a web page with space to hold a Google Map.

<!DOCTYPE html> <html> <head> </head> <body> <p><b>Google Map Example</p> <div id="map-canvas" style="border: 1px solid black; height: 600px;"> </div> </body> </html>

If you load this web page into a web browser, you'll see a title and a blank rectangular region. This is where we'll insert our Google map.

Google Map Example

Next, we'll add some JavaScript to our HTML code, to populate the rectangular region with a map.

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"> </script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY"> </script> <script type="text/javascript"> function init() { var map; var mapOptions = { center: new google.maps.LatLng( 35.82, -78.64 ), zoom: 8 }; map = new google.maps.Map( document.getElementById( "map-canvas" ), mapOptions ); } google.maps.event.addDomListener( window, "load", init ); </script> </head> <body> <p><b>Google Map Example</p> <div id="map-canvas" style="border: 1px solid black; height: 600px;"> </div> </body> </html>

The JavaScript code highlighted in italics initializes a Google map object using Google's Maps API. This code defines the map that lives inside the map-canvas div (the rectangular region) in our HTML, producing a live map that you can manipulate, just like any other Google Map.

Google Map Example

Annotations

For analytics, our goal is normally not just to show a map, but to annotate it with data. The simplest type of annotation is a marker: a glyph that binds data to a particular location on the map. Google Maps allows us to easily locate markers at any location we choose.

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"> </script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&"> </script> <script type="text/javascript"> function init() { var map; var mapOptions = { center: new google.maps.LatLng( 35.82, -78.64 ), zoom: 8 }; map = new google.maps.Map( document.getElementById( "map-canvas" ), mapOptions ); var marker = [ ]; marker.push( new google.maps.Marker( { position: new google.maps.LatLng( 35.78, -78.80 ), map: map, draggable: true, title: "Cary, NC" } ) ); } google.maps.event.addDomListener( window, "load", init ); </script> </head> <body> <p><b>Google Map Example</p> <div id="map-canvas" style="border: 1px solid black; height: 600px;"> </div> </body> </html>

The JavaScript code highlighted in italics creates a marker and places it on the map. You can see the options for the new marker include its latitude and longitude position, the map its attached to, whether the user can drag it to a different position, and a title to display if a user hovers their mouse cursor over the marker.

Google Map Example

It's also possible to display custom-built icons. Google Maps supports scalable vector graphics (SVG) objects as markers. SVG objects allow more flexibility versus the default Google Maps marker. We can change their shape, colour, size, and numerous other properties.

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"> </script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&"> </script> <script type="text/javascript"> function init() { var map; var mapOptions = { center: new google.maps.LatLng( 35.82, -78.64 ), zoom: 8 }; map = new google.maps.Map( document.getElementById( "map-canvas" ), mapOptions ); var marker = [ ]; marker.push( new google.maps.Marker( { position: new google.maps.LatLng( 35.78, -78.80 ), map: map, draggable: true, title: "Cary, NC" } ) ); marker.push( new google.maps.Marker( { position: new google.maps.LatLng( 35.95, -77.81 ), map: map, icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: "blue", fillOpacity: 0.7, scale: 10, strokeColor: "grey", strokeWeight: 1 }, title: "SVG circle", } ) ); marker.push( new google.maps.Marker( { position: new google.maps.LatLng( 35.38, -77.98 ), map: map, icon: { path: "M 0,-115 30,-30 120,-30 50,25 75,110 0,60 -75,110 -50,25 -120,-30 -30,-30 z", fillColor: "yellow", fillOpacity: 0.7, scale: 0.125, strokeColor: "grey", strokeWeight: 1 }, title: "SVG star", } ) ); } google.maps.event.addDomListener( window, "load", init ); </script> </head> <body> <p><b>Google Map Example</p> <div id="map-canvas" style="border: 1px solid black; height: 600px;"> </div> </body> </html>

The JavaScript code highlighted in italics creates two SVG markers: a circle, and a star. The icon section defines properties of the SVG: its shape (or path), colour, opacity, size (or scale), and its outline's colour and thickness (or strokeColor and strokeWeight).

Google Map Example

Loading Data

When we visualize information on a map, we need to provide the raw data that underlies the visualization. There are many ways to do this. One easy option is to store the data in a Google Drive spreadsheet, then load it when we're creating markers to place on the map. The spreadsheet's data can control properties of each marker, for example, its position, its colour, its size, and so on.

As an example, here is a spreadsheet of city populations, latitudes, and longitudes for U.S. cities with a population of 500,000 or higher. Google provides a separate set of Visualization APIs with query functions that allow us to load data from a Google spreadsheet in an SQL-like manner.

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"> </script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-KEY&"> </script> <script type="text/javascript"> function init() { google.load( "visualization", "1", { "callback": init_map } ); } function init_map() { var q; q = new google.visualization.Query( "https://docs.google.com/a/ncsu.edu/spreadsheet/ccc?key=0AjLqx9vOBShEdE5PbmM3Z1Z1a01RVDljWkVrQV84OEE" ); q.setQuery( "SELECT B,D,H,I where D > 499999 ORDER BY B" ); q.send( viz_pop ); } function viz_pop( data ) { var city; // City name var i; // Loop counter var lat; // Latitude var lon; // Longitude var map; // Map var marker = [ ]; // SVG circle markers var n; // Number of data rows var opt = { // Map options center: new google.maps.LatLng( 38.267, -97.806 ), zoom: 4 }; var pop; // Population var pop_rng; // Population range var siz; // Marker size var tbl; // Data table returned map = new google.maps.Map( document.getElementById( "map-canvas" ), opt ); tbl = data.getDataTable(); // Get data table n = tbl.getNumberOfRows(); // Get rows (cities) in table pop_rng = tbl.getColumnRange( 1 );// Population range for( i = 0; i < n; i++ ) { // For all cities lat = tbl.getValue( i, 2 ); // Get lat, lon, population, city name lon = tbl.getValue( i, 3 ); pop = tbl.getValue( i, 1 ); city = tbl.getValue( i, 0 ); siz = 5 + ( ( pop - pop_rng.min ) / ( pop_rng.max - pop_rng.min ) * 10.0 ); marker.push( new google.maps.Marker( { position: new google.maps.LatLng( lat, lon ), map: map, icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: ( pop >= 1000000 ? "red" : "blue" ), fillOpacity: 0.7, scale: siz, strokeColor: "grey", strokeWeight: 1 }, title: ( city + ": " + pop.toLocaleString() ) } ) ); } } google.maps.event.addDomListener( window, "load", init ); </script> </head> <body> <p><b>Google Map Example</p> <div id="map-canvas" style="border: 1px solid black; height: 600px;"> </div> </body> </html>

We draw one circle marker for each city. The city's latitude and longitude (columns H and I) are used to position the marker. The city's population (column D) is used to size the marker, and to colour it: cities with less than one million people are blue, and cities with one million people or more are red. Finally, the city's name (column A) and population are used as a pop-up title for the marker.

Google Map Example