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.