intro to google maps
TRANSCRIPT
Intro. to Google Maps API
ericsk @ Taipei GTUG2009/09/30
Agenda
Google Maps FeaturesMy Map & MappletDirections Streetview
Google Maps API TutorialsHow to startMaps API demosMaps API v3 for iPhone/Android
Use My Maps to Build Your Map
Use My Maps to Build Your Map (cont.)
Collaborate with Others
Sample: Morakot Typhoon SOS Mapcollaborative map
Mapplet: Gadget on Google Maps
Directions
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.
Sample: Google Mobile Local Seach
Streetview
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...
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>
Google Maps API: Quick Start (cont.)
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>
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.
Polyline & Polygon Are Also Overlays
Ref. http://code.google.com/apis/maps/documentation/overlays.htmlYou can also draw a geodesic polyline on map.
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.
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
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
Google Maps API v3 on Mobile Devices
Q. & A.