This document provides an overview of Google Maps features and tutorials for using the Google Maps API. It discusses using My Maps to build custom maps and add collaborators. It also covers directions, Street View, markers, polylines, services like geocoding, and static maps. Tutorials demonstrate basic maps initialization, adding markers and listening to drag events. Both the JavaScript API v2 and new v3 are mentioned, with v3 being optimized for mobile devices.

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.