Your SlideShare is downloading. ×
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,679
views

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,679
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
30
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.