Harvard CGA Google Maps Tutorials
Back to CGA Google Maps API Tutorials Home Page

Exercise 1: Customizing a Basic Map

This tutorial is designed to show the first time user how to create a Google Map using the Google Maps API v3, and add/remove different features and data layers, all on one's local computer. The commands below refer to the Google Chrome internet browser, but other browsers will work too.

Step 1: Copy the sample template

  1. A very basic google map is found by clicking this "Basic Google Map" link.

  2. Click the Basic Google Map link. Try out the pan/zoom controls on the left, and the map type options on the right (Map and Satellite).

  3. View this site's source code by right clicking on the white space around the map and choosing View Page Source.

  4. In the Source window displaying the basic map, Right Click and Choose Save As. Save it to your Desktop, naming it basic.html. When saving, make sure to set "Save as type:" to "Webpage, HTML Only".

Step 2: Inspect the basic.html file in Context text editor

  1. Open the text editor Context by clicking Start > All Programs > Context > Context. If it's not installed, download and install it here.

  2. Drag and drop your basic.html file into Context. Or, click File > Open and browse to the basic.html on your desktop.

  3. On the left part of the Context window is a File Panel. Click the X to close it.

  4. Click View > Wordwrap to turn this on, so all of the text is visible.

  5. Click Tools > Set Highlighter > javascript to change the highlighter from html to javascript. Notice how different text and lines change color for easier readability. Change the highlighter back to html.

  6. Click Options > Environments Options > Editor tab > click the box next to Line Numbers. This will display the line numbers for reference.

  7. Notice that this file contains html, javascript, and text comments. Commenting is used to make the browser ignore that line, whether it is actual code or simply text (on the line above the code) that explains the purpose of the code.

Step 3: View your map in a browser, and modify

  1. In your web browser, open a new tab

  2. In the new tab, click File > Open File, and open your basic.html
    Now you can make changes to the basic.html in the Context text editor, save the file, reload in your browser, and view the changes. After each step below, make sure you reload your browser to view how it changes the map (by clicking the reload page button or Right Click > Reload).

  3. In line 18 the zoom level of the map is specified upon initial load. Change this value, save the document, and reload the web map to see how this changes the map upon load.

  4. In line 20, the values: (39.109, -96.550) are latitude, longitude, values. These values specify the geographic location the center of the map will load to. Change these values and reload the map to change where on earth the map loads to.

  5. Use the Geographic Position Finder to find a latitude, longitude value you want the map to open at.

  6. Change "true" in line 22 to "false". What does this do to the map?

  7. Line 24 controls whether the zoom control is displayed (true) or not (false). Line 27 specifies to use the SMALL or LARGE zoom controls. Change these values, and observe the effect on the map.

  8. Line 32 sets the initial map type upon load. Change the initial map type from "ROADMAP" to "SATELLITE" or "HYBRID" or "PHYSICAL" or "TERRAIN", and reload your map to observe the effect

  9. Change the height and width of the Google Map in line 50 by altering the "700" and "500" values.

Step 4: Add a marker with information to your map

  1. In your basic.html file, copy and paste the following lines of code after line 36: 

    // Adds a marker with popup window information
  var marker1Latlng = new google.maps.LatLng(35.65654,-106);
  var contentString1 = 'I love New Mexico! <a href="http://www.newmexico.org">More</a> about the Land of Enchantment';
  var infowindow = new google.maps.InfoWindow({
      content: contentString1
  });
  var marker1 = new google.maps.Marker({
      position: marker1Latlng,
      map: map,
      title: 'New Mexico'
  });
  google.maps.event.addListener(marker1, 'click', function() {
    infowindow.open(map,marker1);
  });
//End of Add Marker code

  2. Refresh your browser, and the marker should appear. If your map is not zoomed in on the U.S., zoom or pan there to see the marker. Click on marker to view the information.

  3. Change the latitude, longitude value for the marker. Notice the resulting change in marker position when the map is reloaded.

  4. Change the information that appears by changing the "I love New Mexico" text.

  5. In the code, the word "More" is hyperlinked by surrounding it with the "a" tag. The tag opens with <a href="the_url"> and closes with </a>. Move the closing </a> tag after the word "Enchantment". Now all of the text "More about the land of Enchantment" will be hyperlinked.

  6. In the marker's information window, hyperlink goes to www.newmexico.org. Change the url this links to by changing the "www.newmexico.org" to a different website's url. Change the text "More about...." to something that makes sense with the new website.

Step 5: Change the icon style of your markers.

  1. Google has made many icons avaialble as url's. For example, the icon of a gas pump is this url: http://maps.google.com/mapfiles/kml/pal2/icon29.png. A full list of the icons is available here. Also, more icons are listed at MapIcons here. To change the icon from the default red balloon marker to the gas pump icon, add the "var image" and "icon: image," lines of code to your marker code, as shown below in red:

    // Adds a marker with popup window information
  var marker1Latlng = new google.maps.LatLng(35.65654,-106);
  var contentString1 = 'I love New Mexico! <a href="http://www.newmexico.org">More</a> about the Land of Enchantment';
  var infowindow = new google.maps.InfoWindow({
      content: contentString1
  });
  var image = 'http://maps.google.com/mapfiles/kml/pal2/icon29.png'; 
  var marker1 = new google.maps.Marker({
      position: marker1Latlng,
      map: map,
      icon: image, 
      title: 'New Mexico'
  });
  google.maps.event.addListener(marker1, 'click', function() {
    infowindow.open(map,marker1);
  });
//End of Add Marker code

    2. Reload your browser to see the new icon.

  2. Experiment with changing your marker to different icons.

Step 6: Add a polyline to the map.

  1. You may also want to add a line to your map to show a linear feature of interest. Copy the code below and paste it in into your file directly after your marker code. This code will draw a red line from California to Maine to Texas. 

    // Begin add polyline code
  var polyLineCoordinates = [
      new google.maps.LatLng(37.4419, -122.1419),
      new google.maps.LatLng(45.65654,-71),
      new google.maps.LatLng(28.65654,-100)
  ];
  var polyLine = new google.maps.Polyline({
    path: polyLineCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  polyLine.setMap(map);
// End of add polyline code

  2. Change the latitude, longitude values of your polyline to draw the line where you want.

  3. Add new verticies to the line by copying and pasting in additional "new google.maps.LatLng(45.65654,-71)," lines, and changing the coordinate values. Make sure each new line ends with a comma, except for the last one that has no comma.

  4. Change the color of the line to gray by changing the "#FF0000" to "#110022". This is a hexadecimal color reference. To see other color codes, go here

  5. Change the thickness of the line by changing the number after the "strokeWeight:" control. Change the opacity of the line by changing the number after the "strokeOpacity:" control.

Step 7: Change the website look and feel around the map using html

  1. Change the "Basic Google Map" text above the map. Near the bottom of the file (around line 78), change

       <div style="font-weight: bold; font-size: large">Basic Google Map</div>

    to:

    <div style="font-weight: bold; font-size: large">YOUR NAME'S Google Map</div>

  2. Change the Basic Google Map text that appears in the browser file tab by altering line 6 from:

       <title>Basic Google Map</title>

    to:

        <title>MY NAME's Custom Google Map</title>

  3. Add a link to Harvard University by adding the following line directly above the "<!-- Ends the HTML body area -->" line (around line 83):

    <p><a href="http://harvard.edu">Link to Harvard University.</a></p>

    4. An endless supply of help and tutorials are available on the web regarding html, and website customization.

Step 8: Add a kml overlay to the map.

kml is a type of file that stores geographic data, and is readable by Google Maps. There are many ways to create detailed and complex kml files, but for now we'll just overlay a pregenerated kml file.

  1. Copy the code below and paste it in into your basic.html directly after your polyline code:

    //Adds a kml overlay
  var kmlLayer = new google.maps.KmlLayer({
    url: 'https://cga-download.hmdc.harvard.edu/publish_web/CGA_PDF_Maps/4_Corners.kml'
  });
  kmlLayer.setMap(map);
//End of kml overlay code

    This will display a kml file of the boundaries for the "four corner" states of Colorado, New Mexico, Arizona, and Utah. Click in a state to see the information contained in the kml file.

  2. KML stands for Keyhole Markup Language. Keyhole is the company who developed the language before Google bought them out. Since it's a markup language, it is all readable text. View the raw contents of the kml file by entering it's url (below) into your browser:

    https://cga-download.hmdc.harvard.edu/publish_web/CGA_PDF_Maps/4_Corners.kml

    Notice the different tags surrounded by < >. This is the syntax that communicate what, where, and how the data is to be drawn on your map. It's a great way to display a batch of data on a google map.

    3. That's the end of the tutorial. A few important notes and helpful links as you develop are below.