Your SlideShare is downloading. ×
0
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
 ...
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 ...
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
 JavaS...
Google Maps API: Quick Start

<div id="map_canvas"></div>

<script type="text/javascript"
    src="http://www.google.com/j...
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....
Listen the Event of the Marker
<script type="text/javascript">
// load google maps library (v2)
google.load('maps', 2);

g...
Polyline & Polygon Are Also Overlays

  Ref. http://code.google.
  com/apis/maps/documentation/overlays.html
  You can als...
Google Maps Services API

 Ref. http://code.google.
 com/apis/maps/documentation/services.html
 Supported services:
    Lo...
Google Static Map API

 Ref. http://code.google.
 com/apis/maps/documentation/staticmaps/
 This API is a web service that ...
Google Maps API v3

 Ref: http://code.google.com/apis/maps/documentation/v3/
 More efficient, smaller code size, adapted t...
Google Maps API v3 on Mobile
Devices
Q. & A.
Upcoming SlideShare
Loading in...5
×

Intro To Google Maps

2,725

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,725
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Intro To Google Maps"

  1. 1. Intro. to Google Maps API ericsk @ Taipei GTUG 2009/09/30
  2. 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. 3. Use My Maps to Build Your Map
  4. 4. Use My Maps to Build Your Map (cont.)
  5. 5. Collaborate with Others
  6. 6. Sample: Morakot Typhoon SOS Map collaborative map
  7. 7. Mapplet: Gadget on Google Maps
  8. 8. Directions
  9. 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. 10. Sample: Google Mobile Local Seach
  11. 11. Streetview
  12. 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. 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. 14. Google Maps API: Quick Start (cont.)
  15. 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. 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. 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. 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. 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. 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. 21. Google Maps API v3 on Mobile Devices
  22. 22. Q. & A.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×