how to pass value from info window into texfield

ArowanaIndah · ‎06-11-2012

hi,
can someone help me, i just want to get value from infowindow .for example from code below i just want input id="name" and input id="address" get value from infowindow when i click the layer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug=true>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Query Task - Stylize Feature Set with InfoWindow Tabs (Polygon)</title>

    <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 gmap = null;
      var qtask = null;
      var query = null;
      var mapExtension = null;
      var gOverlays = null;

      function initialize() {
        // GMap construction
        gmap = new GMap2(document.getElementById('gmap'));
        gmap.addMapType(G_NORMAL_MAP);
        gmap.addMapType(G_SATELLITE_MAP);
        gmap.addControl(new GLargeMapControl());
        gmap.addControl(new GMapTypeControl());
        gmap.setCenter(new GLatLng(33.97142760360439, -117.3805046081543), 17); // RIVERSIDE (Polyline, Polygon)
        gmap.enableScrollWheelZoom();

        //Create MapExtension utility class
        mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);

        // Query Task
        qtask = new esri.arcgis.gmaps.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1");
        GEvent.addListener(qtask, "executecomplete", function() {
          //console.debug("'query task complete' event fired!!!");
        });

        // Query
        query = new esri.arcgis.gmaps.Query();

      }

      function executeQuery() {
        var cent = gmap.getCenter();
        var bounds = gmap.getBounds();

        // clear gOverlays overlays and event listeners
        mapExtension.removeFromMap(gOverlays);

        // set query parameters
        query.queryGeometry = bounds;
        query.returnGeometry = true;
        query.outFields = ["POP2000","POP2007"];
        // execute query task
        qtask.execute(query, false, mycallback);

      }

      function mycallback(fset) {
        //JS literal class esri.arcgis.gmaps.OverlayOptions
        var overlayOptions = {strokeColor:"#FF0000",strokeWeight:1,strokeOpacity:0.75,fillColor:"#000066",fillOpacity:0.2};

        //JS literal class esri.arcgis.gmaps.InfoWindowOptions with tabs
        var infoWindowOptionsTabs =
{
        content:      "<table>" +
                         "<tr><td>Name:</td> <td><input id ='name' value='{POP2000}'/> </td> </tr>" +
                         "<tr><td>Address:</td> <td><input type='text' id='address' value='{POP2007}'/></td> </tr>"
        };
        gOverlays = mapExtension.addToMap(fset,overlayOptions,infoWindowOptionsTabs);
      }


    </script>

</head>

<body onload="initialize();" onunload="GUnload();">
<table width="100%" height="100%">
    <tr>
      <td align="center">

        <table>
          <tr align="left">
            <td>
              <input type="button" value="Execute Query" onclick="executeQuery();" />

              <input type="button" value="Clear Map Overlays" onclick="mapExtension.removeFromMap(gOverlays);" />
            </td>
          </tr>

          <tr align="left" valign="top">
            <td>
              <div id="gmap" style="width: 450px; height:450px;"></div>
            </td>
          </tr>
        </table>

      </td>
    </tr>
</table>
    <p>
      name<input id="name"/>address<input id="address"/>
    </p>
</body>
</html>

HemingZhu · ‎06-12-2012

hi,
can someone help me, i just want to get value from infowindow .for example from code below i just want input id="name" and input id="address" get value from infowindow when i click the layer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug=true>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Query Task - Stylize Feature Set with InfoWindow Tabs (Polygon)</title>

    <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 gmap = null;
      var qtask = null;
      var query = null;
      var mapExtension = null;
      var gOverlays = null;

      function initialize() {
        // GMap construction
        gmap = new GMap2(document.getElementById('gmap'));
        gmap.addMapType(G_NORMAL_MAP);
        gmap.addMapType(G_SATELLITE_MAP);
        gmap.addControl(new GLargeMapControl());
        gmap.addControl(new GMapTypeControl());
        gmap.setCenter(new GLatLng(33.97142760360439, -117.3805046081543), 17); // RIVERSIDE (Polyline, Polygon)
        gmap.enableScrollWheelZoom();

        //Create MapExtension utility class
        mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);

        // Query Task
        qtask = new esri.arcgis.gmaps.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/1");
        GEvent.addListener(qtask, "executecomplete", function() {
          //console.debug("'query task complete' event fired!!!");
        });

        // Query
        query = new esri.arcgis.gmaps.Query();

      }

      function executeQuery() {
        var cent = gmap.getCenter();
        var bounds = gmap.getBounds();

        // clear gOverlays overlays and event listeners
        mapExtension.removeFromMap(gOverlays);

        // set query parameters
        query.queryGeometry = bounds;
        query.returnGeometry = true;
        query.outFields = ["POP2000","POP2007"];
        // execute query task
        qtask.execute(query, false, mycallback);

      }

      function mycallback(fset) {
        //JS literal class esri.arcgis.gmaps.OverlayOptions
        var overlayOptions = {strokeColor:"#FF0000",strokeWeight:1,strokeOpacity:0.75,fillColor:"#000066",fillOpacity:0.2};

        //JS literal class esri.arcgis.gmaps.InfoWindowOptions with tabs
        var infoWindowOptionsTabs =
{
        content:      "<table>" +
                         "<tr><td>Name:</td> <td><input id ='name' value='{POP2000}'/> </td> </tr>" +
                         "<tr><td>Address:</td> <td><input type='text' id='address' value='{POP2007}'/></td> </tr>"
        };
        gOverlays = mapExtension.addToMap(fset,overlayOptions,infoWindowOptionsTabs);
      }


    </script>

</head>

<body onload="initialize();" onunload="GUnload();">
<table width="100%" height="100%">
    <tr>
      <td align="center">

        <table>
          <tr align="left">
            <td>
              <input type="button" value="Execute Query" onclick="executeQuery();" />

              <input type="button" value="Clear Map Overlays" onclick="mapExtension.removeFromMap(gOverlays);" />
            </td>
          </tr>

          <tr align="left" valign="top">
            <td>
              <div id="gmap" style="width: 450px; height:450px;"></div>
            </td>
          </tr>
        </table>

      </td>
    </tr>
</table>
    <p>
      name<input id="name"/>address<input id="address"/>
    </p>
</body>
</html>

One approach you could try is to embed a javascript function into the infowindow as a link and pass name and address as the parameters into the function (user has to click the link).

ArowanaIndah · ‎06-12-2012

hi hzhu,
thank for reply. actually i'm new in arcgis server google map api and not quite good in this. maybe you can give a example or edit the script to show how it's work.
i'm really really appreciate your help.