Introduction to Google Maps API

Google Maps JavaScript API overview.

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.