Your SlideShare is downloading. ×
Google Maps API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google Maps API

9,465

Published on

Google Maps API basic and advanced examples.

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,465
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
252
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×