Web APIs
HTTP APIs
Visual Wrapper APIs
REST
SOAP
XML-RPC
+ UI =
Google Wave Embed API
Google Maps JavaScript API
Google AJAX Search API
Google AdWords API
Google data APIs
Google Local Search API
In Depth
<!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"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl()));
map.addOverlay(new GMarker(new GLatLng(37.4, -122.1));
map.addOverlay(new GPolyline([new GLatLng(37.4, -122.1),
new GLatLng(36, -120),
new GLatLng(35, -121)]));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<h1>My First Map</h1>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
1
2
3
4
5
Polyline
Marker
Overlays
GLargeMapControl
GMapTypeControl
Controls
zoom 11
zoom 12
Google Maps
JavaScript API v2
Google Maps
JavaScript API v3
Google Maps
API for Flash
Google Static
Maps API
Google Earth API
The Wide World
of Google Maps APIs
How to choose?
Plug-in?
Popularity of Plug-in?
Interactivity?
3d?
Tilt? Terrain?
Customization?
Performance?
Desktop? Mobile?
Overlays? Controls?
Data Rendering
Geometry
Images
CSV
JSON
XML
23.422777,68.367226,ENF,Enontekio,(ENF)
24.941205,60.319382,HEL,Vantaa,Helsinki-vantaa (HEL)
25.044445,60.255554,HEM,Helsinki,malmi (HEM)
24.880833,60.654167,HYV,Hyvinkaa (HYV)
27.403694,68.60833,IVL,Ivalo (IVL)
var lineArray = lines[i].split(",");
var lat = parseFloat(lineArray[iLat]);
var lng = parseFloat(lineArray[iLng]);
var point = new GLatLng(lat,lng);
var states = {
'WA' : [[48.400032, -124.628906], [45.828800, -123.925781], [46.134171, -117.158203], [48.980217, -117.158203], [48.922501, -123.046875], [48.224674, -123.134766], [48.400032, -124.628906]],
'OR' : [[42.032974, -124.277344], [42.098221, -116.982422], [46.073231, -116.982422], [45.706181, -123.837891], [42.032974, -124.277344]],
...};
var latlngs = [];
for (var i = 0; i < states[stateCode].length; i++) {
var latlng = states[stateCode][i];
latlngs.push(new GLatLng(latlng[0], latlng[1]));
}
var polygon = new GPolygon(latlngs, "#f33f00", 0, 0, "#ff0000", 0.01);
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(latlng));
}
<markers>
<marker lat="37.427770" lng="-122.144841"/>
<marker lat="37.413320" lng="-122.125604"/>
<marker lat="37.433480" lng="-122.139062"/>
<marker lat="37.445427" lng="-122.162307"/>
</markers>
KML
<Placemark>
<name>Yellow Line</name>
<LineString>
<coordinates>
-87.75250,42.04049,0
-87.74726629257202,42.02620267868042,0
-87.74621486663818,42.0246148109436,0
-87.7447772026062,42.02352046966553,0
-87.74299621582031,42.02279090881348,0
</coordinates>
</LineString>
</Placemark>
map.addOverlay(new GGeoXml("http://mapgadgets.googlepages.com/cta.kml"));
google.earth.fetchKml(ge, ""http://mapgadgets.googlepages.com/cta.kml");
Data
Text File
Data
Images
Mashups
=
Your Data
+
Single Image Overlay
var bounds = new GLatLngBounds(new GLatLng(37.4654338, 14.6012836),
new GLatLng(37.91904192, 15.35832));
var img = "http://bbs.keyhole.com/ubb/z0302a1700/etna.jpg";
var groundOverlay = new GGroundOverlay (img, bounds);
map.addOverlay(groundOverlay);
Tiled Image Overlay
http://gmaps-samples.googlecode.com/svn/trunk/groundoverlay/groundoverlaysimple.html
var tilelayer = new GTileLayer();
tilelayer.getTileUrl = function(point,zoom) {
var url = "imagetiles/" + zoom + "/x" + point.x + "_y" + point.y + ".png" ;
return url ;
}
map.addOverlay(new GTileLayerOverlay(tilelayer);
http://gmaps-samples.googlecode.com/svn/trunk/hierarchicalmaptypecontrol/custommaps_sf.html
How do you choose?
Type of data? Amount of data?
Performance?
Interactivity?
Resources?
Effort?
Google Maps JavaScript APIMore presentations by Pamela Fox
Popular presentations
Faith: the Final Frontier
Celebration Christian Church on
http://www.celebrationchristianchurch.com/, celebration christian church is a local part of the body of Christ (The Church) in Northwest Portland Oregon. We are full of the Holy ...
Future-Proof Your Education
Maria Andersen on
How do you prepare for uncertain career paths where technical knowledge doubles every two years? You pay attention to the skills that surround the content: ...
More popular prezis in Explore>