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 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
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.fBFGgCdNjoDMACQA--
&city=peitou
Response:
<?xml version=\"1.0\"?>
<ResultSet xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance
xsi:schemaLocation=\"urn:yahoo:maps http://api.local.yahoo.com/M
GeocodeResponse.xsd\">
<Result precision=\"zip\">
<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
Hello Map
<!DOCTYPE html \"-//W3C//DTD XHTML 1.0 Strict//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"/>
<title>Google Maps JavaScript API Example</title>
<script src=\"http://maps.google.com/maps?
file=api&v=2&key=abcdefg&sensor=true_or_false\"
type=\"text/javascript\"></script>
<script type=\"text/javascript\">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(\"map_canvas\"));
map.setCenter(new GLatLng(25.1225,121.5140), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload=\"initialize()\" onunload=\"GUnload()\">
<div id=\"map_canvas\" style=\"width: 500px; height: 300px\"></div>
</body>
</html>
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 displays Google Earth satellite images
• G_HYBRID_MAP displays a mixture of normal and satellite views
Control
addControl( )
• Position Control GControlPosition()
• G_ANCHOR_TOP_RIGHT or BUTTOM_RIGHT
• G_ANCHOR_TOP_LEFT or BUTTOM_LEFT
• Map Control
• GSmallMapControl()
• GLargeMapControl()
Info Window
• map.openInfoWindow(map.getCenter(),document.
createTextNode(\"Here is Yang-Ming University\"));
Marker
map.addOverlay( )
var point = new GLatLng(25.1225, 121.5140);
var marker = new GMarker(point);
map.addOverlay(marker);
Our Style Marker
GIcon( )
var icon = new GIcon();
icon.image = \"http://b017.web.ym.edu.tw/ezcatfiles/b017/img/img/331/img002-s.jpg\";
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);
Reference
• Google Maps API Document
• atenasio.googlepages.com
0 comments
Post a comment