Simple Polyline

This example draws a triangle

Try it here as a Google Gadget:

This example draws the outline of a county using points obtained from USA census data

Try it here as a Google Gadget:

Simple triangle 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 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 Polyline using the triangle coordinates with desired color, opacity and width(weight) and add to the map

var triangle = new google.maps.Polyline({path: triangleCoordinates, strokeColor: "#FF0000", strokeOpacity:1.0, strokeWeight:2});

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 Polyline using the county coordinates with desired color, opacity and width(weight) and add to the map

var countyLine = new google.maps.Polyline({

path: countyCoordinates,

strokeColor: "#0000FF",

strokeOpacity: 1.0,

strokeWeight: 2

});

countyLine.setMap(map);

}

</script>

</head>

</body>

</html>

Page updated

Google Sites

Report abuse