Maps (v3) Simple Polyline - Print View)

Google Maps (v3) Simple Polyline

Lines on a map are a useful tool to highlight driving directions, routes, or just the way between two points. In this example a simple five pixel black line is drawn from the coordinates of Boston, New York, Chicago and Los Angeles. All of the code from this simple example can be used to create far more complex routes by adding more points to the line.
<!-- add a META element with the charset attribute set to "utf-8", as follows Your page must use UTF-8 encoding to create some elements of the map -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!-- Reference to the map control -->
<script type="text/javascript" src="">
<!-- A sensor value is required. True indicates that your application is using a sensor (such as a GPS locator) to determine the user's location. False indicates that you are not-->
<script type="text/javascript">

var map; function initialize() { var myLatlng = new google.maps.LatLng(39.828180,-98.57955);
// sets the center of the map to the varible "LatLong" that contains the coordinates var myOptions = { zoom: 4,
// Zoom level for initial map. Valild vaues range form 0 to 20 center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP
// 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 }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var Polyline_Coordinates = [ new google.maps.LatLng(42.357778,-71.061667),
// Boston new google.maps.LatLng(40.716667,-74),
// New York new google.maps.LatLng(41.836944,-87.684444),
// Chicago new google.maps.LatLng(34.05,-118.25)
// Los Angeles ]; var Polyline_Path = new google.maps.Polyline({ path: Polyline_Coordinates, strokeColor: "#000000",
// color of the outline of the polyline strokeOpacity: 1.0,
// between 0.0 and 1.0 strokeWeight: 5
// The stroke width in pixels }); Polyline_Path.setMap(map); } </script>
<title> - Google Maps Polyline Example v3</title>
<body bgcolor="#FFFFFF" onload="initialize()">
<table align=center border=1 width=750 height=500>
<td valign=top>
<!-- Notice just in case the browser does not support Javascript -->
JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser. <br>
To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript>
<div id="map_canvas" style="width:750; height:500">
<!-- div tag set to display the map with width and height in pixels width and height can also be expressed by percent-->