This example draws a filled triangle
Try it here as a Google Gadget:
This example draws a filled county area using points obtained from USA census data
Try it here as a Google Gadget:
Simple filled triangle HTML and JavaScript for a server. The fillColor and fillOpacity and Polygon rather than Polyline are the only differences from the simple triangle polyline example. See the Sized Markers page for directions to convert this file to a Google Gadget xml file.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>County Polyline</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
// choose zoom level, center, map type and create a Map instance (global since var keyword not used)
var myOptions = {zoom: 7,center: new google.maps.LatLng(35.07, -89),mapTypeId: google.maps.MapTypeId.TERRAIN};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// create an array with the coordinates for the triangle, note that the 1st and 4th are the same point
var triangleCoordinates = [new google.maps.LatLng(35.0, -89.4),new google.maps.LatLng(35.4, -89.1),
new google.maps.LatLng(35.0, -88.8),new google.maps.LatLng(35.0, -89.4) ];
// create an instance of Polygon using the triangle coordinates with desired color, opacity and width(weight) and add to the map
var triangle = new google.maps.Polygon({path: triangleCoordinates, strokeColor: "#FF0000", strokeOpacity:1.0, strokeWeight:2,
fillColor: "#FF0000", fillOpacity: 0.35});
triangle.setMap(map);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
County outline HTML and JavaScript for a server. See the Sized Markers page for directions to convert this file to a Google Gadget xml file.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>County Polyline</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
// choose zoom level, center, map type and create a Map instance (global since var keyword not used)
var myOptions = {zoom: 7, center: new google.maps.LatLng(35.07, -89), mapTypeId: google.maps.MapTypeId.TERRAIN};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// create an array with the coordinates for the county boundary, note that the 1st and last are the same point
var countyCoordinates = [
new google.maps.LatLng(35.00088376, -89.19813471),
new google.maps.LatLng(35.43573045, -89.18456081),
new google.maps.LatLng(35.43571625, -88.84872906),
new google.maps.LatLng(35.38991438, -88.85644998),
new google.maps.LatLng(35.33599094, -88.79264315),
new google.maps.LatLng(35.00318231, -88.7850434),
new google.maps.LatLng(35.00088376, -89.19813471)
];
// create an instance of Polygon using the county coordinates with desired color, opacity and width(weight) and add to the map
var countyLine = new google.maps.Polygon({
path: countyCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
countyLine.setMap(map);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>