Intro To Google Maps
Upcoming SlideShare
Loading in...5
×
 

Intro To Google Maps

on

  • 4,372 views

 

Statistics

Views

Total Views
4,372
Views on SlideShare
4,355
Embed Views
17

Actions

Likes
0
Downloads
29
Comments
0

4 Embeds 17

http://www.slideshare.net 11
http://blendedschools.blackboard.com 2
http://www.linkedin.com 2
http://www.slideee.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro To Google Maps Intro To Google Maps Presentation Transcript

  • Intro. to Google Maps API ericsk @ Taipei GTUG 2009/09/30
  • 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
  • Use My Maps to Build Your Map
  • Use My Maps to Build Your Map (cont.)
  • Collaborate with Others
  • Sample: Morakot Typhoon SOS Map collaborative map
  • Mapplet: Gadget on Google Maps
  • Directions
  • 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.
  • 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 map Get directions/address lookup via GeoCoder service Show a streeview Use 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.html You can also draw a geodesic polyline on map.
  • 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.
  • 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
  • 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.