GOOGLE MAP ACTIVITY

Organizations that have no money for GIS but do have someone who understands Java programming and html can create some interesting web-based information gathering and dissemination systems using the Google Map Application Programming Interface (API).  We are going to do a few "quick and dirty" Google Maps principally by cutting, pasting and doing a little customization of the examples at http://www.google.com/apis/maps/documentation/ and some sample scripts at this tutorial site: http://www.econym.demon.co.uk/googlemaps/  There are currently many "Google Map Mashup" sites on the Internet that have streamlined this process so that you just type in addresses, select icons, enter content, etc.. and the program creates the necessary Javascript and writes out the html.  However, you have no actual control over the site.  You can retrieve and edit your map but it stays on their site.  Most of these sites also say that they can place advertising on your map which is what they plan to do... as does Google.  Since this was last updated in May, 2006, they may already.

Getting Set Up - First, create a google_maps folder in c:\arcims\website\ to keep your Google Map html files and your key.

The Google Map API is free but requires a key that is unique to the machine you are preparing your Google Map on.  To obtain a key go to http://www.google.com/apis/maps/signup.html and click on Obtain Account. Check with me before doing this - the machines may have the keys already.  Go through the steps you need to get an account and then at the bottom of the signup page you will see the option to obtain a new account.  Use your machine name, e.g. cfd312008 and use this URL for the key:

http://your_machine_name.students.ccsu.edu

Google Maps will send you back a very long key.  Cut and paste this into a text file and save that text file in your Google Maps folder on c:\arcims\website.  Make sure you get it all... Go to the tutorial site http://www.econym.demon.co.uk/googlemaps/ .  When there, click on Part 2 - Adding a clickable sidebar. Click on the Example on that page which will take you to this Google map - http://www.econym.demon.co.uk/googlemaps/examples/map2.htm  From the View menu, pull down to source.  This opens the source code for that script in a Notepad window.  Save it as an htm file, e.g. my_first_google_map in your google_maps workspace.  In Notepad replace the key in this file with the key you generated for your API.  Open a browser and go to your site, e.g. http://cfd312xxx.students.ccsu.edu/website/google_maps/my_first_google_map.htm  You should see some Canadian cities with markers on them and a sidebar in the table.

Now, think of a theme for your map.  Some suggestions:

First you have to change the center point of your map.  So figure out the approximate center point (you could use ArcMap and the c:\esri\esridata\us\counties.shp file.  Remember, all data must be in decimal longitude/latitude) and appropriate zoom level (the larger the number the closer in the zoom). You will also edit the section of code that begins with // to add the points. This entails finding out the longitude and latitude of the point (use the free geocoder at http://geocoder.us/), entering that into the GPoint2 element and changing the text values in the createMarker element.  For example, this is a section of code from a site I did on a site around my home:

 var point = new GPoint2(-72.728739,41.755700);
var marker = createMarker(point,"<font face = 'Verdana' size = '2'>Grocery Store</font>","<font face = 'Verdana' size = '2'><a href = 'http://www.hallsmarket.net'>Halls Market</a></font>")
map.addOverlay(marker);

This section of code above also shows some of the html coding you can do inside the createMarker element.  If you want to see how it works, it is at http://cgissrv1.ccsu.edu/website/google_maps/near_home.htm

You can create your Google map by editing this code below.  You will need to paste in your key and edit the GPoint2 values to locate your particular features (use the free geocoder site to get address-based longitudes and latitudes).  Alternatively, you could download the code from my site (above) and edit that.

 <!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>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBRRwPhutbWBmyj82Go_H6JlE7EvFBSKFFFHFePAwvib9UM0geoA3Pgafw" type="text/javascript"></script>
</head>
<body onunload="GUnload()">


<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
<div id="sidebar"></div>
</td>
</tr>
</table>
<a href="http://www.econym.demon.co.uk/googlemaps/basic2.htm">Back to the tutorial page</a>


<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>


<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {

function GPoint2(x,y) { return new GLatLng(y,x); }


// this variable will collect the html which will eventually be placed in the sidebar
var sidebar_html = "";

// arrays to hold copies of the markers and html used by the sidebar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;


// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the sidebar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the sidebar html
sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
i++;
return marker;
}


// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}


// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GPoint2(-79.359741, 43.907787), 8);

// add the points
var point = new GPoint2(-79.90138, 43.65654);
var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
map.addOverlay(marker);

var point = new GPoint2(-78.89231, 43.91892);
var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
map.addOverlay(marker);

var point = new GPoint2(-79.10040, 43.82589);
var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
map.addOverlay(marker);


// put the assembled sidebar_html contents into the sidebar div
document.getElementById("sidebar").innerHTML = sidebar_html;

}

else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}

// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://www.econym.demon.co.uk/googlemaps/

//]]>
</script>
</body>

</html>

When you have completed your Google map, e-mail me the URL.  Unfortunately, you will not be able to access these maps from outside the CCSU domain.

Extra credit for: