06/05/09 HUGE   /  ParentsConnect  / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com basic and adv...
The Basics <ul><li>Sign up for an API key </li></ul><ul><li>Load the Map API </li></ul><ul><li>Add Map Controls </li></ul>...
Sign up for an API key <ul><li>http://code.google.com/apis/maps/signup.html </li></ul><ul><li>Add your application URL (ea...
Load the Map API <ul><li><script src=&quot;http://maps.google.com/maps?file=api&amp;v= 2.x &amp;key=ABQIAAAA987xac5Q2o6E_H...
Add Map Controls <ul><li>map.addControl(new GLargeMapControl()); </li></ul><ul><li>map.addControl(new GMapTypeControl()); ...
Load KML <ul><li><Placemark>  </li></ul><ul><li><name>Marker 1</name>  </li></ul><ul><li><description> </li></ul><ul><li>S...
<ul><li>Test you KML file: </li></ul><ul><li>http://maps.google.com/maps?q=http://econym.googlepages.com/example1.kml </li...
<ul><li>var kml = new GGeoXml(“huge.kml&quot;); </li></ul><ul><li>map.addOverlay(kml); </li></ul>Load KML within API HUGE ...
Advanced Stuff <ul><li>Add Markers with Info Window </li></ul><ul><li>Map center on markers </li></ul><ul><li>Change Map T...
Add Markers with Info Window <ul><li>var point = new GLatLng(43.65654,-79.90138); </li></ul><ul><li>var marker = new GMark...
Map center on Markers <ul><li>var bounds = new GLatLngBounds(); </li></ul><ul><li>for (var i = 1; i < markers.length; i++)...
Change Map Type <ul><li>map.setMapType(G_NORMAL_MAP); </li></ul><ul><li>G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,G_PHYS...
Load StreetView Layer <ul><li>var streetView = new GStreetviewOverlay() </li></ul><ul><li>map.addOverlay(streetView); </li...
Load StreetView Panorama <ul><li>var streetView = new GStreetviewPanorama(document.getElementById(”div&quot;)); </li></ul>...
Load Photo and Wikipedia Layer <ul><li>photoLayer = new GLayer(&quot;com.panoramio.all&quot;); </li></ul><ul><li>map.addOv...
Get Directions <ul><li>var gdir = new GDirections(map, document.getElementById(‘directions’)); </li></ul><ul><li>var coord...
References <ul><li>http://code.google.com/apis/maps/documentation/index.html  (doc) </li></ul><ul><li>http://econym.google...
Upcoming SlideShare
Loading in...5
×

Google Maps API

9,531

Published on

Google Maps API basic and advanced examples.

Published in: Technology, News & Politics
1 Comment
4 Likes
Statistics
Notes
  • Simple and go to the point...excelent!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
9,531
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
254
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Google Maps API

  1. 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. 2. The Basics <ul><li>Sign up for an API key </li></ul><ul><li>Load the Map API </li></ul><ul><li>Add Map Controls </li></ul><ul><li>Load KML </li></ul>HUGE / Google Maps API
  3. 3. Sign up for an API key <ul><li>http://code.google.com/apis/maps/signup.html </li></ul><ul><li>Add your application URL (each domain should have a different key) </li></ul><ul><li>Get the sample code and key </li></ul>HUGE / Google Maps API
  4. 4. Load the Map API <ul><li><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> </li></ul><ul><li><script type=&quot;text/javascript”> </li></ul><ul><li>if (GBrowserIsCompatible()) { </li></ul><ul><li>var map = new GMap2(document.getElementById(&quot;map&quot;)); </li></ul><ul><li>map.setCenter(new GLatLng(37.4419, -122.1419), 13); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li><div id=“map”></div> </li></ul>HUGE / Google Maps API
  5. 5. Add Map Controls <ul><li>map.addControl(new GLargeMapControl()); </li></ul><ul><li>map.addControl(new GMapTypeControl()); </li></ul><ul><li>GSmallMapControl(), GLargeMapControl(), GSmallZoomControl(), </li></ul><ul><li>GScaleControl(), GMapTypeControl()… </li></ul>HUGE / Google Maps API
  6. 6. Load KML <ul><li><Placemark> </li></ul><ul><li><name>Marker 1</name> </li></ul><ul><li><description> </li></ul><ul><li>Some stuff to put in the first info window </li></ul><ul><li></description> </li></ul><ul><li><Point> </li></ul><ul><li><coordinates>-122.1,37.4,0</coordinates> </li></ul><ul><li></Point> </li></ul><ul><li></Placemark> </li></ul>HUGE / Google Maps API
  7. 7. <ul><li>Test you KML file: </li></ul><ul><li>http://maps.google.com/maps?q=http://econym.googlepages.com/example1.kml </li></ul>Load KML HUGE / Google Maps API
  8. 8. <ul><li>var kml = new GGeoXml(“huge.kml&quot;); </li></ul><ul><li>map.addOverlay(kml); </li></ul>Load KML within API HUGE / Google Maps API
  9. 9. Advanced Stuff <ul><li>Add Markers with Info Window </li></ul><ul><li>Map center on markers </li></ul><ul><li>Change Map Type </li></ul><ul><li>Load StreetView Layer </li></ul><ul><li>Load StreetView Panorama </li></ul><ul><li>Load Photo and Wikipedia Layer </li></ul><ul><li>Get Directions </li></ul>HUGE / Google Maps API
  10. 10. Add Markers with Info Window <ul><li>var point = new GLatLng(43.65654,-79.90138); </li></ul><ul><li>var marker = new GMarker(point); </li></ul><ul><li>marker.html = ‘Content to display’; </li></ul><ul><li>GEvent.addListener(marker, &quot;click&quot;, </li></ul><ul><li>function(){ </li></ul><ul><li>marker.openInfoWindowHtml(marker.html); </li></ul><ul><li>}); </li></ul><ul><li>map.addOverlay(marker); </li></ul>HUGE / Google Maps API
  11. 11. Map center on Markers <ul><li>var bounds = new GLatLngBounds(); </li></ul><ul><li>for (var i = 1; i < markers.length; i++) { </li></ul><ul><li>bounds.extend(markers[i].getPoint()); </li></ul><ul><li>} </li></ul><ul><li>var center = bounds.getCenter(); </li></ul><ul><li>var zoom = map.getBoundsZoomLevel(bounds); </li></ul><ul><li>map.setCenter(center,zoom); </li></ul>HUGE / Google Maps API
  12. 12. Change Map Type <ul><li>map.setMapType(G_NORMAL_MAP); </li></ul><ul><li>G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,G_PHYSICAL_MAP… </li></ul>HUGE / Google Maps API
  13. 13. Load StreetView Layer <ul><li>var streetView = new GStreetviewOverlay() </li></ul><ul><li>map.addOverlay(streetView); </li></ul>HUGE / Google Maps API
  14. 14. Load StreetView Panorama <ul><li>var streetView = new GStreetviewPanorama(document.getElementById(”div&quot;)); </li></ul><ul><li>streetView.setLocationAndPOV( marker.getLatLng() ); </li></ul>HUGE / Google Maps API
  15. 15. Load Photo and Wikipedia Layer <ul><li>photoLayer = new GLayer(&quot;com.panoramio.all&quot;); </li></ul><ul><li>map.addOverlay(photoLayer); </li></ul><ul><li>wikiLayer = new GLayer(&quot;org.wikipedia.en&quot;); </li></ul><ul><li>map.addOverlay(wikiLayer); </li></ul>HUGE / Google Maps API
  16. 16. Get Directions <ul><li>var gdir = new GDirections(map, document.getElementById(‘directions’)); </li></ul><ul><li>var coords = “from: 43.82589,-79.1004 to 43.65654,-79.90138”; </li></ul><ul><li>var mode = G_TRAVEL_MODE_DRIVING; </li></ul><ul><li>// or G_TRAVEL_MODE_WALKING </li></ul><ul><li>gdir.load(coords, {getPolyline:true,getSteps:true,travelMode:mode}); </li></ul>HUGE / Google Maps API
  17. 17. References <ul><li>http://code.google.com/apis/maps/documentation/index.html (doc) </li></ul><ul><li>http://econym.googlepages.com/index.htm (examples) </li></ul><ul><li>http://googlegeodevelopers.blogspot.com (blog) </li></ul><ul><li>http://groups-beta.google.com/group/Google-Maps-API (forum) </li></ul>HUGE / Google Maps API
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×