Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Beginning Google Maps API Guide

    Hochgeladen von

    Arta Sitinjak
    77 Ansichten5 Seiten
    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.

    Originalbeschreibung:

    Originaltitel

    Beginning_Google_Maps_API.pdf

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden
    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.

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    77 Ansichten5 Seiten

    Beginning Google Maps API Guide

    Hochgeladen von

    Arta Sitinjak
    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.

    Copyright:

    © All Rights Reserved
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 5

    Beginning Google Maps API

    John Carpenter (johncarp@uga.edu), 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());

    Das könnte Ihnen auch gefallen