CodeAve.com(Google Map (v3) Simple Polygon - Print View)

Google Map (v3) Simple Polygon

Polygons are a useful way to highlight portions of a map. By specifying a series of coordinates the polygon will form a closed loop and define a filled region within your map. In this example the coordinates of the four corners of the state of Colorado are represented. The area in-between is filled in based on parameters as well as the color of the border area.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>
Map of Colorado</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() { var myLatLng = new google.maps.LatLng(39.554883,-105.776367); var myOptions = { zoom: 6,
// Zoom level for initial map. Valild vaues range from 0 to 20 center: myLatLng,
// Center the map mapTypeId: google.maps.MapTypeId.TERRAIN,
// sets the type of map to be displayed
// HYBRID - displays a transparent layer of major streets on satellite images
// ROADMAP - displays a normal street map
// SATELLITE - displays satellite images
// TERRAIN - displays maps with physical features such as terrain streetViewControl: true,
// True displays the pegman to enable street views, false hides the pegman from view scrollwheel: true,
// True enables (default) the mousewheel to zoom within the map,
// false disable the mousewheel from zooming disableDoubleClickZoom: false,
// Enables/disables the ability to zoom in on the map when the mouse is double-clicked
// false is the default draggable: true,
// Enables/disables the ability to drag the map around with the mouse
// true is the default keyboardShortcuts: true,
// Enables/disables keyboard command to control the map
// true is the default mapTypeControl: true,
// Enables/disables the the map controls (Maps|Satellite|Hybrid|Terrain)
// true is the default navigationControl: true,
// Enables/disables the the map navigation controls (Zoom In, Zoom Out, etc)
// true is the default scaleControl: true,
// Enables/disables the the map scale of miles/km mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
// HORIZONTAL_BAR displays the common (Maps|Satellite|Hybrid|Terrain)
// DEFAULT currently the same as HORIZONTAL_BAR, but may change
// DROPDOWN_MENU displayes the option is a drop-down menu position: google.maps.ControlPosition.TOP_RIGHT
// Places the Map Type Controls on the map
// BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT, TOP, TOP_LEFT, TOP_RIGHT }, navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT
// ZOOM_PAN
// DEFAULT
// SMALL
// ANDROID } }; var Colorado; var
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var Colorado_coordinates = [ new google.maps.LatLng(40.963308,-109.050293), new google.maps.LatLng(36.993778,-109.039307), new google.maps.LatLng(37.002553,-102.052002), new google.maps.LatLng(40.996484,-102.073975)
// The ordered sequence of coordinates of the Polyline. ];
// Construct the polygon for Colorado Colorado = new google.maps.Polygon({ paths: Colorado_coordinates, strokeColor: "#000000",
// color of the outline of the polygon strokeOpacity: 0.8,
// between 0.0 and 1.0 strokeWeight: 2,
// The stroke width in pixels fillColor: "#FF0000",
// color used within the polygon Hexadecimal fillOpacity: 0.35
// between 0.0 and 1.0 }); Colorado.setMap(map); } </script>
</head>
<body bgcolor="#FFFFFF" onload="initialize()">
<div id="map_canvas" style="width:800px; height:600px;">
</div>
</body>
</html>


http://www.codeave.com/maps/code.asp?u_log=9011