Simple Polygons

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>

<title>County Polyline</title>

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>

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

<title>County Polyline</title>

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>

</html>

Page updated

Google Sites

Report abuse