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

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

Sign up for an API key

Load the Map API

Add Map Controls

Load KML

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

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

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

<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>

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

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

GSmallMapControl(), GLargeMapControl(), GSmallZoomControl(),

GScaleControl(), GMapTypeControl()…

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

<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>

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

Test you KML file:

http://maps.google.com/maps?q=http://econym.googlepages.com/example1.kml

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

var kml = new GGeoXml(“huge.kml&quot;);

map.addOverlay(kml);

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

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

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

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);

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

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);

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

map.setMapType(G_NORMAL_MAP);

G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,G_PHYSICAL_MAP…

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

var streetView = new GStreetviewOverlay()

map.addOverlay(streetView);

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

var streetView = new GStreetviewPanorama(document.getElementById(”div&quot;));

streetView.setLocationAndPOV( marker.getLatLng() );

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

photoLayer = new GLayer(&quot;com.panoramio.all&quot;);

map.addOverlay(photoLayer);

wikiLayer = new GLayer(&quot;org.wikipedia.en&quot;);

map.addOverlay(wikiLayer);

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

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});

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

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)