Your SlideShare is downloading. ×
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
Intro To Google Maps
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

Intro To Google Maps

2,704

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,704
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
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. Intro. to Google Maps API ericsk @ Taipei GTUG 2009/09/30
  • 2. Agenda Google Maps Features My Map & Mapplet Directions Streetview Google Maps API Tutorials How to start Maps API demos Maps API v3 for iPhone/Android
  • 3. Use My Maps to Build Your Map
  • 4. Use My Maps to Build Your Map (cont.)
  • 5. Collaborate with Others
  • 6. Sample: Morakot Typhoon SOS Map collaborative map
  • 7. Mapplet: Gadget on Google Maps
  • 8. Directions
  • 9. Directions URL http://maps.google.com/maps?saddr=S&daddr=D S: source address, could be address or lat,lng D: destination address In general browser, it will open the Google Maps site and compute directions directly In iPhone/Android, the URL will open the Google Maps app on the phone and show the directions.
  • 10. Sample: Google Mobile Local Seach
  • 11. Streetview
  • 12. Google Maps API API page: http://code.google.com/apis/maps/ Put the Google Maps data on your website through the JavaScript/Flex/Static API. What you can do: Show data on a map Get directions/address lookup via GeoCoder service Show a streeview Use map as a geo input interface ...
  • 13. Google Maps API: Quick Start <div id="map_canvas"></div> <script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY "></script> <script type="text/javascript"> // load google maps library (v2) google.load('maps', 2); google.setOnLoadCallback(function(){ // create a Map2 instance, and draw it on #map_canvas var canvas = document.getElementById('map_canvas'); var map = new google.maps.Map2(canvas, { size: new google.maps.Size(400, 300) }); // set the center of the map map.setCenter(new google.maps.LatLng(25.030978,121.560287), 15); }); </script>
  • 14. Google Maps API: Quick Start (cont.)
  • 15. Put a Marker on the Map <script type="text/javascript"> // load google maps library (v2) google.load('maps', 2); google.setOnLoadCallback(function(){ .... // create a marker var marker = new google.maps.Marker( new google.maps.LatLng(LATITUDE , LONGITUDE ), {draggable: true}); // add the marker onto the map map.addOverlay(marker); }); </script>
  • 16. Listen the Event of the Marker <script type="text/javascript"> // load google maps library (v2) google.load('maps', 2); google.setOnLoadCallback(function(){ .... // create a marker var marker = new google.maps.Marker(...); // listen the ``dragend'' event of the marker google.maps.Event.addListener(marker, 'dragend', function(latlng) { // call on the dragend event is triggered } ); // add the marker onto the map map.addOverlay(marker); }); </script> Google Maps API Ref.
  • 17. Polyline & Polygon Are Also Overlays Ref. http://code.google. com/apis/maps/documentation/overlays.html You can also draw a geodesic polyline on map.
  • 18. Google Maps Services API Ref. http://code.google. com/apis/maps/documentation/services.html Supported services: Lookup address/latlng Streeview Panorama object Load KML/GeoRSS AdSense on Maps Directions Traffics Never forget to check out Google Geo Developer Blog.
  • 19. Google Static Map API Ref. http://code.google. com/apis/maps/documentation/staticmaps/ This API is a web service that generates a map image Use <img src="http://....." alt=""> to use this API One client can only access 1000 times/day Lack of map controls but easy to use
  • 20. Google Maps API v3 Ref: http://code.google.com/apis/maps/documentation/v3/ More efficient, smaller code size, adapted to iPhone/Android. Still preview release
  • 21. Google Maps API v3 on Mobile Devices
  • 22. Q. & A.

×