Daw a polyline and get its length - JS w/ Google Maps

ShaningYu · ‎07-18-2011

From http://help.arcgis.com/en/webapi/javascript/arcgis/demos/util/util_measureline.html, I loaded the JavaScript, which provides the function to draw a polyline and receives the line's lengh. I followed the approach in Google Maps Layer for ArcGIS JavaScript API: Examples (http://gmaps-utility-gis.googlecode.com/svn/tags/gmapslayer/1.0/docs/examples.html) to try to add a google map layer on the top of ESRI's map. But I can't see the google map. The code is presented below. If you want to try, please copy, paste it onto Notepad, and then save it as htm file. Then, you can open it locally. Hopefully, you can hint me something. Thanks.
I also tried in several other samples *see my other post threads). The common thing is that once I get ESRI's maps, I can't add google map layer on the top.
I tried another way, add ESRI maps on top of Google Maps. It works for an ESRI dynamic layer but not for an ESRI cached tiled layer.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
   <title>Measure Distances</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4" ></script>
<script type="text/javascript" src="http://gmaps-utility-gis.googlecode.com/svn/tags/gmapslayer/1.0/src/gmapslayer_compiled.js" ></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.geometry");
      dojo.require("esri.toolbars.draw");
      dojo.require("dojo.number");

      var geometryService;
var gmap;

      function init() {
        //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
        //If this null or not available the project and lengths operation will not work. Otherwise it will do a http post to the proxy.
        esriConfig.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
        esriConfig.defaults.io.alwaysUseProxy = false;

        var startExtent = new esri.geometry.Extent(-80.0571,41.3697,-74.4321,44.0822, new esri.SpatialReference({wkid:4326}) );
        var map = new esri.Map("map", {extent:startExtent});

        dojo.connect(map, "onLoad", initFunctionality);

        map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

        geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        dojo.connect(geometryService, "onLengthsComplete", outputDistance);

              gMap = new gmaps.GoogleMapsLayer({
                visible: false,
                id: 'googlemaps'
              });
              map.addLayer(gMap);

      }

      function initFunctionality(map) {
        var tb = new esri.toolbars.Draw(map);

        var lengthParams = new esri.tasks.LengthsParameters();

        //on draw end add graphic, project it, and get new length
        dojo.connect(tb, "onDrawEnd", function(geometry) {
          map.graphics.clear();

          lengthParams.polylines = [geometry];
          lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
          lengthParams.geodesic = true;

          geometryService.lengths(lengthParams);
          var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol()));
        });

        tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
      }

      function outputDistance(result) {
        dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] / 1000) + " kilometers";
      }

      dojo.addOnLoad(init);
    </script>

</head>
<body>
    Click and hold down on the map to draw a line that will be added to the map. The application will then use the geometry service to project and compute the length of the line.
    <div id="map" class="claro" style="width:1024px; height:512px; border:1px solid #000;"></div>

    Distance: <span id="distance"></span>
</body>
</html>