CodeAve.com CodeAve.com - Maps - Google Maps
ASP
JavaScript
CSS
HTML
Maps
·Map Script Writers
·Bing Maps
·Google Maps
·Contents
Links
Mail List
Search
Sitemap


 


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.
View the Output
Text View
Print View
Mail this Link

<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>

 



ASP: What's New? | Articles | Script Writers | Database Display | Read/Write
Server Variables | Response Objects | Random Events | Miscellaneous
HTML: Forms | Hyperlinks | Headers | Tables | Hyperlinks | Headers | Text Display
JavaScript: Document Info | Forms | Images | Navigation | Script Writers
CSS: Basics | Page Display | Text Display | Script Writers | Miscellaneous
  • 2014 michael kors
  • air max women 2013
  • 2014 michael kors
  • air max 2014
  • oakley glasses
  • oakley glasses

  • Maps: Map Script Writers | Bing Maps | Google Maps
  • bottes fr
  • ugg boot
  • Privacy Statement

    CodeAve.com is hosted by MyHosting.com
    Donate Food Online with a Mouse Click at TheHungerSite.com
    Donate Land Online with a Mouse Click at TheRainForestSite.com
    © 1999 - 2017 CodeAve.com
    All Rights Reserved