Download - Intro To Google Maps
![Page 1: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/1.jpg)
Intro. to Google Maps API
ericsk @ Taipei GTUG2009/09/30
![Page 2: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/2.jpg)
Agenda
Google Maps FeaturesMy Map & MappletDirections Streetview
Google Maps API TutorialsHow to startMaps API demosMaps API v3 for iPhone/Android
![Page 3: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/3.jpg)
Use My Maps to Build Your Map
![Page 4: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/4.jpg)
Use My Maps to Build Your Map (cont.)
![Page 5: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/5.jpg)
Collaborate with Others
![Page 6: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/6.jpg)
Sample: Morakot Typhoon SOS Mapcollaborative map
![Page 7: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/7.jpg)
Mapplet: Gadget on Google Maps
![Page 8: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/8.jpg)
Directions
![Page 9: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/9.jpg)
Directions URL
http://maps.google.com/maps?saddr=S&daddr=DS: source address, could be address or lat,lngD: destination address
In general browser, it will open the Google Maps site and compute directions directlyIn iPhone/Android, the URL will open the Google Maps app on the phone and show the directions.
![Page 10: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/10.jpg)
Sample: Google Mobile Local Seach
![Page 11: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/11.jpg)
Streetview
![Page 12: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/12.jpg)
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 mapGet directions/address lookup via GeoCoder serviceShow a streeviewUse map as a geo input interface...
![Page 13: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/13.jpg)
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>
![Page 14: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/14.jpg)
Google Maps API: Quick Start (cont.)
![Page 15: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/15.jpg)
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>
![Page 16: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/16.jpg)
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.
![Page 17: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/17.jpg)
Polyline & Polygon Are Also Overlays
Ref. http://code.google.com/apis/maps/documentation/overlays.htmlYou can also draw a geodesic polyline on map.
![Page 18: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/18.jpg)
Google Maps Services API
Ref. http://code.google.com/apis/maps/documentation/services.htmlSupported services:
Lookup address/latlngStreeview Panorama objectLoad KML/GeoRSSAdSense on MapsDirectionsTraffics
Never forget to check out Google Geo Developer Blog.
![Page 19: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/19.jpg)
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 APIOne client can only access 1000 times/day
Lack of map controls but easy to use
![Page 20: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/20.jpg)
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
![Page 21: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/21.jpg)
Google Maps API v3 on Mobile Devices
![Page 22: Intro To Google Maps](https://reader034.vdocuments.site/reader034/viewer/2022052505/5554b1c2b4c90503388b4593/html5/thumbnails/22.jpg)
Q. & A.