Beginning_Google_Maps_API.pdf
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&v=2&key= "Your API key code goes here” type="text/javascript"></script> </head> 3. Declare variables (make sure you do this because IE won’t work if you don’t): <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());
-
Upload
arta-sitinjak -
Category
Documents
-
view
219 -
download
0
Transcript of Beginning_Google_Maps_API.pdf
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&v=2&key= "Your API key code goes here”
type="text/javascript"></script> </head>
3. Declare variables (make sure you do this because IE won’t work if you don’t): <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&v=2&key=ABQIAAAAy2lsN85Q1FhNR6UEWiZzpRRRDnc1bK3yYTnAY08wXzYnGxys2RQVUKfWa2okLrcTnVRhd_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://gce-lter.marsci.uga.edu/public/gis/kml/LTERsites_placemark.kml"); var gagesKml = new GGeoXml("http://gce-lter.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.addMapType(G_PHYSICAL_MAP);map.addControl(new GLargeMapControl()
map.addControl(new GOverviewMapControl());http://gce-lter.marsci.uga.edu/public/gis/UntitledTest.html
map.addControl(new GMapTypeControl());
