This document provides an overview of the Google Maps API, including how to load the API, add basic controls and overlays like markers and KML layers, and examples of more advanced features such as changing the map type, adding street view, and getting directions. It includes code snippets for common tasks like displaying an info window when a marker is clicked, centering the map on a group of markers, and loading photo and Wikipedia layers.

1. 06/05/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com basic and advanced examples Google Maps API October 3rd, 2008

2. The Basics Sign up for an API key Load the Map API Add Map Controls Load KML HUGE / Google Maps API

3. Sign up for an API key http://code.google.com/apis/maps/signup.html Add your application URL (each domain should have a different key) Get the sample code and key HUGE / Google Maps API

4. Load the Map API <script src=&quot;http://maps.google.com/maps?file=api&amp;v= 2.x &amp;key=ABQIAAAA987xac5Q2o6E_HDg_0fkXBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSIRcmJpMTmfaLEIzai7ecUONSSiQ&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript”> if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(&quot;map&quot;)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } </script> <div id=“map”></div> HUGE / Google Maps API

5. Add Map Controls map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); GSmallMapControl(), GLargeMapControl(), GSmallZoomControl(), GScaleControl(), GMapTypeControl()… HUGE / Google Maps API

6. Load KML <Placemark> <name>Marker 1</name> <description> Some stuff to put in the first info window </description> <Point> <coordinates>-122.1,37.4,0</coordinates> </Point> </Placemark> HUGE / Google Maps API

7. Test you KML file: http://maps.google.com/maps?q=http://econym.googlepages.com/example1.kml Load KML HUGE / Google Maps API

8. var kml = new GGeoXml(“huge.kml&quot;); map.addOverlay(kml); Load KML within API HUGE / Google Maps API

9. Advanced Stuff Add Markers with Info Window Map center on markers Change Map Type Load StreetView Layer Load StreetView Panorama Load Photo and Wikipedia Layer Get Directions HUGE / Google Maps API

10. Add Markers with Info Window var point = new GLatLng(43.65654,-79.90138); var marker = new GMarker(point); marker.html = ‘Content to display’; GEvent.addListener(marker, &quot;click&quot;, function(){ marker.openInfoWindowHtml(marker.html); }); map.addOverlay(marker); HUGE / Google Maps API

11. Map center on Markers var bounds = new GLatLngBounds(); for (var i = 1; i < markers.length; i++) { bounds.extend(markers[i].getPoint()); } var center = bounds.getCenter(); var zoom = map.getBoundsZoomLevel(bounds); map.setCenter(center,zoom); HUGE / Google Maps API

12. Change Map Type map.setMapType(G_NORMAL_MAP); G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,G_PHYSICAL_MAP… HUGE / Google Maps API

13. Load StreetView Layer var streetView = new GStreetviewOverlay() map.addOverlay(streetView); HUGE / Google Maps API

14. Load StreetView Panorama var streetView = new GStreetviewPanorama(document.getElementById(”div&quot;)); streetView.setLocationAndPOV( marker.getLatLng() ); HUGE / Google Maps API

15. Load Photo and Wikipedia Layer photoLayer = new GLayer(&quot;com.panoramio.all&quot;); map.addOverlay(photoLayer); wikiLayer = new GLayer(&quot;org.wikipedia.en&quot;); map.addOverlay(wikiLayer); HUGE / Google Maps API

16. Get Directions var gdir = new GDirections(map, document.getElementById(‘directions’)); var coords = “from: 43.82589,-79.1004 to 43.65654,-79.90138”; var mode = G_TRAVEL_MODE_DRIVING; // or G_TRAVEL_MODE_WALKING gdir.load(coords, {getPolyline:true,getSteps:true,travelMode:mode}); HUGE / Google Maps API

17. References http://code.google.com/apis/maps/documentation/index.html (doc) http://econym.googlepages.com/index.htm (examples) http://googlegeodevelopers.blogspot.com (blog) http://groups-beta.google.com/group/Google-Maps-API (forum) HUGE / Google Maps API