Polyline Array

This example uses AJAX to input points from a CSV file and creates an array of county border points and uses the array to draw the outline of all of the counties in the state.

This data file is needed for this example: County border points CSV data file

Try it here as a Google Gadget:

HTML and JavaScript Google Gadget xml

HTML and JavaScript as used on a server:

<html>

<head>

<title>Tennessee Counties</title>

var xhr = false;

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.0, -86.0),mapTypeId: google.maps.MapTypeId.TERRAIN};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

makeRequest("TNCounties.csv");

}

// issue AJAX request

function makeRequest(url) {

if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }

else if (window.ActiveXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");}

if (xhr) {

xhr.onreadystatechange = response;

xhr.open("GET", url, true);

xhr.send(null);

}

else document.write("ERROR - could not create XMLHttpRequest");

}

// process AJAX request when ready, expecting an CSV document

function response() {

var xmldoc = '';

if (xhr.readyState == 4) {

// Run on server (200) or local machine (0) on Firefox, not Chrome

if (xhr.status == 200 || xhr.status == 0) {csvdoc = xhr.responseText; dispCSV(csvdoc); }

else document.write("ERROR - " + xhr.status);

}

function dispCSV(csvdoc) {

// parse the information when ready creating a table of information

x = csvdoc.split("\n");

// extract the coordinates and store them in the array countyCoordinates

for (j=1;j<x.length;j++)

{

a=x[j].split(',');

var countyPolygon = [];

var countyCoordinates = [];

for (var i = 0; i < a[3]; i++)

countyCoordinates[i] = new google.maps.LatLng(a[4+i*2],a[5+i*2]);

// create an instance of a polyline for each county and add it to the map

countyPolygon[j-1] = new google.maps.Polyline({

path: countyCoordinates,

strokeColor: "#000000",

strokeOpacity: 1.0,

strokeWeight: 2

});

countyPolygon[j-1].setMap(map);

}

return;

}

</script>

</head>

</body>

</html>

Google Gadget xml

XML nodes and CDATA are added at the start and end of the file, as is registerLoadHandler (in bold). The HTML tags html, head, and body are removed, as are meta and title. The remaining html (one div tag in this example) is listed as the first line in the CDATA section. The Google Maps JavaScript reference and my JavaScript follow the HTML. The AJAX makeRequest and response functions are changed to us the gadgets AJAX functions(in bold).

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="Google Maps Polyline Array Example" height="300"

description="Google Maps Polyline Array Example"

author="Stephanie Smullen" author_email="stephanie.smullen@gmail.com">

<Require feature="sharedmap"/>

</ModulePrefs>

<Content type="html">

<![CDATA[

// declare global variables, infowindow must be explicitly declared global

var infowindow;

function initialize() {

// set center of map to chosen location -- 35, -86 is central Tennessee

var myLatlng = new google.maps.LatLng(35, -86);

// choose zoom level, center, map type and create a Map instance (global since var keyword not used)

var myOptions = {zoom: 7, center: myLatlng, mapTypeId: google.maps.MapTypeId.HYBRID };

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// issue the AJAX request which will create markers with infowindows

makeRequest("http://sites.google.com/site/stephaniesmullen/files/mapexamples/TNCounties.csv");

}

function makeRequest (url) {

var params = {};

params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;

gadgets.io.makeRequest(url, response, params);

}

function response (obj) {

dispCSV(obj.text);

}