Your SlideShare is downloading. ×
GIS
     MAP API

 Eric C.Y., Lee
Agenda

• Introduction
• API Market
• API: How to program
• Reference
Introduction

• The definition of GIS:
 • Geographic Information System
 • Geographic Information Science
 • Geographic Inf...
Desktop Software

• ArcGIS
• Quantum GIS (Open Source)
• GRASS GIS (Open Source)
• Google Earth
Database

• Boeing Spatial Query Server
• Oracle Spatial
• ESRI ArcSDE
Knowledge

• Geodetic System
 • WGS84
 • TWD97, TWD67
API Market
• Foreign
 • Yahoo MAP
 • Google MAP
 • Microsoft Virtual Earth
• Local
 • Urmap
 • Taiwan MAP
Comparable
                                           Microsoft
                Yahoo! Map   Google Map                   ...
Before using the API
     All you need is API Key
Using Map API
Geocode
• By REST Web Service
      http://local.yahooapis.com/MapsService/V1/geocode?
    appid=YD-9G7bey8_JXxQP6rxl.fBFG...
Hello Map
<!DOCTYPE html quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
  quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d...
Map Center
                   setCenter( )

•   map.setCenter(new GLatLng(25.1225,121.5140), 15);
Map Type
•   map.setMapType(G_SATELLITE_MAP);
• G_NORMAL_MAP displays the default road map view

• G_SATELLITE_MAP display...
Control
                    addControl( )

•   Position Control GControlPosition()

    •   G_ANCHOR_TOP_RIGHT or BUTTOM_R...
Info Window
•   map.openInfoWindow(map.getCenter(),document.
    createTextNode(quot;Here is Yang-Ming Universityquot;));
Marker
                      map.addOverlay( )
var point = new GLatLng(25.1225, 121.5140);
var marker = new GMarker(point)...
Listener
                GEvent.addListener( )

GEvent.addListener(marker, quot;clickquot;, function() {
	 	 marker.openIn...
Our Style Marker
                                    GIcon( )
var icon = new GIcon();
	 	 icon.image = quot;http://b017.we...
Reference


• Google Maps API Document
• atenasio.googlepages.com
Upcoming SlideShare
Loading in...5
×

Google MAP API

1,966

Published on

Published in: Design, Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

No notes for slide




















  • Transcript of "Google MAP API"

    1. 1. GIS MAP API Eric C.Y., Lee
    2. 2. Agenda • Introduction • API Market • API: How to program • Reference
    3. 3. Introduction • The definition of GIS: • Geographic Information System • Geographic Information Science • Geographic Information Service
    4. 4. Desktop Software • ArcGIS • Quantum GIS (Open Source) • GRASS GIS (Open Source) • Google Earth
    5. 5. Database • Boeing Spatial Query Server • Oracle Spatial • ESRI ArcSDE
    6. 6. Knowledge • Geodetic System • WGS84 • TWD97, TWD67
    7. 7. API Market • Foreign • Yahoo MAP • Google MAP • Microsoft Virtual Earth • Local • Urmap • Taiwan MAP
    8. 8. Comparable Microsoft Yahoo! Map Google Map Urmap Taiwan Map Virtual Earth Require API YES YES NO YES YES Key? Display area World World World Only Taiwan Only Taiwan range YES YES API Document YES YES YES (MSDN) (in Chinese) (in Chinese) Search by No YES YES YES YES Address (Commercial) Marker YES YES YES YES YES
    9. 9. Before using the API All you need is API Key
    10. 10. Using Map API
    11. 11. Geocode • By REST Web Service http://local.yahooapis.com/MapsService/V1/geocode? appid=YD-9G7bey8_JXxQP6rxl.fBFGgCdNjoDMACQA-- &city=peitou Response: <?xml version=quot;1.0quot;?> <ResultSet xmlns:xsi=quot;http://www.w3.org/2001/XMLSchema-instance xsi:schemaLocation=quot;urn:yahoo:maps http://api.local.yahoo.com/M GeocodeResponse.xsdquot;> <Result precision=quot;zipquot;> <Latitude>25.130590</Latitude> <Longitude>121.498306</Longitude> <Address></Address> <City>Beitou District</City> <State>Taiwan</State> <Zip></Zip> <Country>TW</Country> </Result> </ResultSet> <!-- ws03.ydn.gq1.yahoo.com compressed/chunked Tue May 5 23:50
    12. 12. Hello Map <!DOCTYPE html quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;/> <title>Google Maps JavaScript API Example</title> <script src=quot;http://maps.google.com/maps? file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_falsequot; type=quot;text/javascriptquot;></script> <script type=quot;text/javascriptquot;> function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(quot;map_canvasquot;)); map.setCenter(new GLatLng(25.1225,121.5140), 13); map.setUIToDefault(); } } </script> </head> <body onload=quot;initialize()quot; onunload=quot;GUnload()quot;> <div id=quot;map_canvasquot; style=quot;width: 500px; height: 300pxquot;></div> </body> </html>
    13. 13. Map Center setCenter( ) • map.setCenter(new GLatLng(25.1225,121.5140), 15);
    14. 14. Map Type • map.setMapType(G_SATELLITE_MAP); • G_NORMAL_MAP displays the default road map view • G_SATELLITE_MAP displays Google Earth satellite images • G_HYBRID_MAP displays a mixture of normal and satellite views
    15. 15. Control addControl( ) • Position Control GControlPosition() • G_ANCHOR_TOP_RIGHT or BUTTOM_RIGHT • G_ANCHOR_TOP_LEFT or BUTTOM_LEFT • Map Control • GSmallMapControl() • GLargeMapControl()
    16. 16. Info Window • map.openInfoWindow(map.getCenter(),document. createTextNode(quot;Here is Yang-Ming Universityquot;));
    17. 17. Marker map.addOverlay( ) var point = new GLatLng(25.1225, 121.5140); var marker = new GMarker(point); map.addOverlay(marker);
    18. 18. Listener GEvent.addListener( ) GEvent.addListener(marker, quot;clickquot;, function() { marker.openInfoWindowHtml(quot; quot;); });
    19. 19. Our Style Marker GIcon( ) var icon = new GIcon(); icon.image = quot;http://b017.web.ym.edu.tw/ezcatfiles/b017/img/img/331/img002-s.jpgquot;; icon.iconSize = new GSize(40, 40); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1); var marker = new GMarker(center, icon); map.addOverlay(marker);
    20. 20. Reference • Google Maps API Document • atenasio.googlepages.com

    ×