wraithan/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Extract Profile of Google Route Using a Geoprocessor Task</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>

    <script type="text/javascript">
    var map; //google map
    var directions; //google directions class
    var profileTask;

    function onLoad() {
      gmapOptions = {
        mapTypes: [G_PHYSICAL_MAP,G_NORMAL_MAP,G_HYBRID_MAP]
      }
      map = new GMap2(document.getElementById("map"),gmapOptions);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(34.17, -117.63), 8);
      map.enableScrollWheelZoom();

      directions = new GDirections(map);

      //when directions have been loaded from Google Servers call GP profile task.
      GEvent.addListener(directions, "load", generateProfile);

      //identify proxy page to use if the toJson payload to the geoprocessor service is greater than 2000 characters.
      //If this null or not available the buffer operation will not work. Otherwise it will do a http post to the proxy.
      esri.arcgis.gmaps.Config.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

      profileTask = new esri.arcgis.gmaps.Geoprocessor("http://sampleserver2.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/ProfileService");
    }


    function generateProfile(directions) {
      var polyLine = directions.getPolyline();
      if (directions.getDistance().meters <= 1000000) {
        var featureSet = new esri.arcgis.gmaps.FeatureSet();
        var feature = new esri.arcgis.gmaps.Feature();
        feature.geometry = polyLine;
        var features = [feature];
        featureSet.features = features;
        var taskParams = {'Input_Polylines':featureSet, 'Image_width':500, 'Image_Height':250, 'Display_Segments':false};
        profileTask.execute(taskParams, false, profileCallback);
      } else {
        var middlePnt = polyLine.getVertex(polyLine.getVertexCount()/2);
        map.openInfoWindowHtml(middlePnt, "Route too long. Please choose a route less than 1,000 km.");
      }
    }

    function profileCallback(gpResults) {
      var results = gpResults.results;
      var featureSet = results[0].value;
      var profileFeature = featureSet.features[0];
      var middleVertexIndex = Math.floor(profileFeature.geometry[0].getVertexCount() / 2);
      var middlePnt = profileFeature.geometry[0].getVertex(middleVertexIndex);

      var profileURL = profileFeature.attributes.profileURL;
      var surfaceLen = profileFeature.attributes.surfaceLen;
      var profileFN = profileFeature.attributes.profileFN;

      var infoContent = "<div style='width:500px; height:250px;'><img id='" + profileFN + "' src='" + profileURL + "' ></img></div>";
      map.openInfoWindowHtml(middlePnt, infoContent);
    }

    function getDirections() {
      map.clearOverlays();
      var fromAddr = document.getElementById('fromAddress').value;
      var toAddr = document.getElementById('toAddress').value;
      directions.load(fromAddr + " to " + toAddr);
    }


</script>

</head>
<form>
From Address: <input type="text" id="fromAddress" value="Redlands, CA" size="25"/>&nbsp;&nbsp;
To Address: <input type="text" id="toAddress" value="Palm Springs, CA" size="25"/>&nbsp;&nbsp;
<input type="button" value="Get Route and Elevation Profile" onclick="getDirections();" />
</form>
  <body onload="onLoad()">
    <div id="map" style="width: 100%; height: 750px; float:left; border: 1px solid black;"></div>
  </body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
	<title>Extract Profile of Google Route Using a Geoprocessor Task</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<script src="http://maps.google.com/maps?file=api&v=2&key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
	<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>

	<script type="text/javascript">
	var map; //google map
	var directions; //google directions class
	var profileTask;

	function onLoad() {
	gmapOptions = {
	mapTypes: [G_PHYSICAL_MAP,G_NORMAL_MAP,G_HYBRID_MAP]
	}
	map = new GMap2(document.getElementById("map"),gmapOptions);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(34.17, -117.63), 8);
	map.enableScrollWheelZoom();

	directions = new GDirections(map);

	//when directions have been loaded from Google Servers call GP profile task.
	GEvent.addListener(directions, "load", generateProfile);

	//identify proxy page to use if the toJson payload to the geoprocessor service is greater than 2000 characters.
	//If this null or not available the buffer operation will not work. Otherwise it will do a http post to the proxy.
	esri.arcgis.gmaps.Config.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

	profileTask = new esri.arcgis.gmaps.Geoprocessor("http://sampleserver2.arcgisonline.com/ArcGIS/rest/services/Elevation/ESRI_Elevation_World/GPServer/ProfileService");
	}


	function generateProfile(directions) {
	var polyLine = directions.getPolyline();
	if (directions.getDistance().meters <= 1000000) {
	var featureSet = new esri.arcgis.gmaps.FeatureSet();
	var feature = new esri.arcgis.gmaps.Feature();
	feature.geometry = polyLine;
	var features = [feature];
	featureSet.features = features;
	var taskParams = {'Input_Polylines':featureSet, 'Image_width':500, 'Image_Height':250, 'Display_Segments':false};
	profileTask.execute(taskParams, false, profileCallback);
	} else {
	var middlePnt = polyLine.getVertex(polyLine.getVertexCount()/2);
	map.openInfoWindowHtml(middlePnt, "Route too long. Please choose a route less than 1,000 km.");
	}
	}

	function profileCallback(gpResults) {
	var results = gpResults.results;
	var featureSet = results[0].value;
	var profileFeature = featureSet.features[0];
	var middleVertexIndex = Math.floor(profileFeature.geometry[0].getVertexCount() / 2);
	var middlePnt = profileFeature.geometry[0].getVertex(middleVertexIndex);

	var profileURL = profileFeature.attributes.profileURL;
	var surfaceLen = profileFeature.attributes.surfaceLen;
	var profileFN = profileFeature.attributes.profileFN;

	var infoContent = "<div style='width:500px; height:250px;'><img id='" + profileFN + "' src='" + profileURL + "' ></img></div>";
	map.openInfoWindowHtml(middlePnt, infoContent);
	}

	function getDirections() {
	map.clearOverlays();
	var fromAddr = document.getElementById('fromAddress').value;
	var toAddr = document.getElementById('toAddress').value;
	directions.load(fromAddr + " to " + toAddr);
	}


	</script>

	</head>
	<form>
	From Address: <input type="text" id="fromAddress" value="Redlands, CA" size="25"/>
	To Address: <input type="text" id="toAddress" value="Palm Springs, CA" size="25"/>
	<input type="button" value="Get Route and Elevation Profile" onclick="getDirections();" />
	</form>
	<body onload="onLoad()">
	<div id="map" style="width: 100%; height: 750px; float:left; border: 1px solid black;"></div>
	</body>
	</html>