Scribd
Upload
184 views

Beginning Google Maps API PDF

The document provides steps to add a Google Maps API to a website, including adding KML layers. It describes: 1) Getting an API key from Google. 2) Inserting the key into the website code. 3) Declaring variables for the map and KML layers. 4) Listing functions to initialize the map, add layers, and toggle layers on/off with checkboxes.

Uploaded by

Arta Sitinjak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
184 views

Beginning Google Maps API PDF

The document provides steps to add a Google Maps API to a website, including adding KML layers. It describes: 1) Getting an API key from Google. 2) Inserting the key into the website code. 3) Declaring variables for the map and KML layers. 4) Listing functions to initialize the map, add layers, and toggle layers on/off with checkboxes.

Uploaded by

Arta Sitinjak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Beginning Google Maps API

John Carpenter ([email protected]), GCE-LTER


September 10, 2009

Follow the steps below to add a simple Google Maps API (pictured below), including
kml layers, to your site. Lots of other utilities can be added to make your map more
dynamic. See the Resources section for helpful links.

1. Sign up for API key here: http://code.google.com/apis/maps/signup.html

2. Insert key:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key= "Your
API key code goes here
type="text/javascript"></script>
</head>
3. Declare variables (make sure you do this because IE wont work if you dont):
<body onload="onLoad()" onunload="GUnload()">
<script type="text/javascript">
var map;
var1 = new GGeoXml("insert links to your kml files");
var2 = new GGeoXml("insert links to your kml files");

4. List functions:
function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("myMap")); Can use any name
map.setMapType(G_SATELLITE_MAP); Sets initial map to satellite imagery
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());

map.addControl(new GLargeMapControl(), new GControlPosition


(G_ANCHOR_TOP_LEFT, new GSize(7,10))); # pixels from top left corner
map.setCenter(new GLatLng(39.1, -96.4), 2); Define map center using Lat/Long
& zoom level (the higher the number the closer the zoom).
map.enableScrollWheelZoom();Enables mouse wheel for zooming in/out
}
map.addOverlay(var1); Adds kml layer to map when map loads
}
function boxclick(box,category) { Toggles layer on/off
if (box.checked) {
map.addOverlay(category);
}
else {
map.removeOverlay(category);
}
}
</script>

5. Set up table with checkbox for toggling layer on/off:


<table width="800" height="500" border="1" bgcolor="#333333">
<tr>
<th width="600"><div id="myMap" style="width:600px; Insert your map name
height:500px"></div></th>
<th width="200" bgcolor="#CCCCCC"><form id="form1" name="form1"
method="post" action="">
<label>
<input type="checkbox" name="checkbox" value="checkbox"
onclick="boxclick(this, var2)"/> Use your variable name
<span class="style2">Layer 1 </span></label>
</form>
</th>
</tr>
</table>
</body>
</html>

Full Code (from: http://gce-lter.marsci.uga.edu/public/gis/UntitledTest.html)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAy2lsN85
Q1FhNR6UEWiZzpRRRDnc1bK3yYTnAY08wXzYnGxys2RQVUKfWa2okLrcTnVRh
d_qMs_aCkQ"
type="text/javascript"></script>
<style type="text/css">
<!-.style2 {color: #000000}
-->
</style>
</head>
<body onload="onLoad()" onunload="GUnload()">
<script type="text/javascript">
var map;
var lterKml = new GGeoXml("http://gcelter.marsci.uga.edu/public/gis/kml/LTERsites_placemark.kml");
var gagesKml = new GGeoXml("http://gcelter.marsci.uga.edu/public/gis/kml/site_gages.kml");
function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("myMap"));
map.setMapType(G_SATELLITE_MAP);
map.addMapType(G_PHYSICAL_MAP);
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GLargeMapControl(),
new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,10)));
map.setCenter(new GLatLng(39.1, -96.4), 2);
map.enableScrollWheelZoom();
}
map.addOverlay(lterKml);
}

function boxclick(box,category) {
if (box.checked) {
map.addOverlay(category);
}
else {
map.removeOverlay(category);
}
}
</script>
<table width="800" height="500" border="1" bgcolor="#333333">
<tr>
<th width="600"><div id="myMap" style="width:600px;
height:500px"></div></th>
<th width="200" bgcolor="#CCCCCC"><form id="form1" name="form1"
method="post" action="">
<label>
<input type="checkbox" name="checkbox" value="checkbox"
onclick="boxclick(this, gagesKml)"/>
<span class="style2">Layer 1 </span></label>
</form>
</th>
</tr>
</table>
</body>
</html>

Resources:
Google Maps API Tutorial http://econym.org.uk/gmap/
Google Maps Demo Gallery
http://code.google.com/apis/maps/documentation/demogallery.html
Using Markers http://mapsapi.googlepages.com/categories.htm
Key DragZoom
http://gmaps-utility-library.googlecode.com/svn/trunk/keydragzoom/1.0/docs/examples.html

If you have any questions, feel free to contact me at the email address above.
Good luck!

map.addControl(new GLargeMapControl()

map.addControl(new GMapTypeControl());

http://gce-lter.marsci.uga.edu/public/gis/UntitledTest.html

map.addMapType(G_PHYSICAL_MAP);

map.addControl(new GOverviewMapControl());

You might also like