Google Maps JavaScript 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
Making Maps
Mashups
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?
Data Processing
Addresses
Latitude, Longitude
Manual Selection
48 Pirrama Rd, Pyrmont, NSW
-33.866866,151.195773
Data > Map
"Geocoding"
http://maps.google.com/maps/geo?
q=48+Pirrama+Rd,+Pyrmont+NSW
&output=json
&key=your_key_here
....
<Point>
<coordinates>-122.083739,37.423021,0</coordinates>
</Point>
....
*Must only be used in conjunction with Google Maps APIs.
Google HTTP Geocoder