Lines and Polygons
Peterson
Simple Line
function initialize() {
var myLatLng = new google.maps.LatLng(5, -170);
var myOptions = {
zoom: 2,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
});
flightPath.setMap(map);
}
Flow Map
Fat Line
// Second line segment
var flightPlanCoordinates = [
new google.maps.LatLng(41.8, -87.7),
new google.maps.LatLng(44.9, -93.3)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: “#00FF00”,
strokeOpacity: .5,
strokeWeight: 10
});
flightPath.setMap(map);
Great Circle
Geodesic = Great circle
var flightPlanCoordinates = [
new google.maps.LatLng(34, -118.214897),
new google.maps.LatLng(51.5, 0)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
geodesic: true,
strokeWeight: 3
});
From XML file
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Write out coordinates in contentWindow
showInContentWindow(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
Cross-section
// Display a polyline of the elevation path.
var pathOptions = {
path: elevationPath,
strokeColor: '#0000CC',
opacity: 0.4,
map: map
}
polyline = new google.maps.Polyline(pathOptions);
// Extract the data from which to populate the chart.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < results.length; i++) {
data.addRow(['', elevations[i].elevation]);
}
Encoded Polylines
Encoding
Polygon
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
From XML file
downloadUrl("17_point_polygon.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
flightPlanCoordinates[i]=point;
counter=i
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
// make last point equal to first
flightPlanCoordinates[counter+1]=flightPlanCoordinates[0];
// define the line characteristics
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF00F0",
strokeOpacity: 1.0,
strokeWeight: 3,
fillColor: "#FF00F0",
fillOpacity: 0.5
});
// put the line on the map
flightPath.setMap(map);
Donut
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(34.0187, -118.4058),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
bounds = new google.maps.LatLngBounds();
var donut = new google.maps.Polygon({
paths: [drawCircle(new google.maps.LatLng(34.0187, -118.4058), 200),
drawCircle(new google.maps.LatLng(34.0187, -118.4058), 100)],
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
donut.setMap(map);
map.fitBounds(bounds);
Line Coordinate Thinning
File Conversion
Formatting for XML file
From KML file
Google Map Error
Choropleth Map
// Put the population data for the counties into the popdata array
popdata = new Array
(33185,6931,372,783,492,5668,11132,2185,3354,43954,7341,8595,25963,8819,3811,5934,9
865,6564,10113,9660,11242,20587,8466,25018,1958,6170,36171,492003,2109,6259,3348,2
729,5003,23365,1995,1790,1978,660,2454,55555,9490,3446,1029,2926,10610,756,6736,78
74,4683,6701,8250,892,3710,8812,267135,35865,749,656,497,35279,7954,5171,3705,7247,
4650,15747,2804,2992,9442,7564,31962,5349,10865,8656,1544,14155,142637,20344,3654
6,16835,5571,3083,1403,6570,5317,629,7273,4373,20044,9196,3701,823,14502)
// Find the min and max population values for the 93 counties after doing a non-linear
transformation using the log function
var min=100000000;
var max=-100000000;
for (var i = 0; i < 93; i++) {
popdata[i] = Math.log(popdata[i])
if (popdata[i] < min) { min=popdata[i] }
if (popdata[i] > max) { max=popdata[i] }
}
// Find the range and compute the opacities for each polygon
var range = max-min
// compute an opacity as a range of the data values
opacities = new Array ()
for (var i = 0; i < 93; i++) {
opacities[i] = 1-((max - popdata[i]) / range)
Opacity-based Choropleth Map
Heat Map
Shaded Isoline (Isotherms)
Heatmap Data
</script>
<script type="text/javascript">
function initialize() {
var brazil = new google.maps.LatLng(-18.771115, -42.758789);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: brazil,
zoom: 4,
mapTypeId: 'roadmap'
});
// Table 136705 has beaches along Brazil's coastline
// View this table in a webpage:
http://tables.googlelabs.com/DataSource?dsrcid=136705
layer = new google.maps.FusionTablesLayer(136705, {
heatmap: true