Community

Getting Info from Goolge Maps into Text Box

1009
0
02-28-2013 01:19 AM
DarrylHilton
by
New Contributor III
‎02-28-2013 01:19 AM
Hi

I have a bit of code using ESR's Javascript API for GoogleMaps as below:

Whenever I click on a point which has been taken from my ArcGIS Server instance It give me the specified fields returned in the usual googlemaps bubble. The map is being used as part of a form for reporting faults so I could essentially do with the information in the bubble going into a field in the form which can then be submitted with the rest of the form as normal.

I hope that makes sense

<!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>DH Test - Return Data from ArcGIS Server</title>

    <script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyC2qROCcqJ_yZbBRaojMmNSgc-cIByJrac"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(53.5167, -1.1333), 10);
        gmap.enableScrollWheelZoom();


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


        // Query Task
        qtask = new esri.arcgis.gmaps.QueryTask("http://gisfusinternet/ArcGIS/rest/services/GoogleTest/MapServer/0");

        // You can execute a task and listen for the complete event or use the callback to get the results
        GEvent.addListener(qtask, "executecomplete", function() {
          //console.debug("'query task complete' event fired!!!");
        });

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

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

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

        // set query parameters
        query.queryGeometry = bounds;
        query.returnGeometry = true;
  query.outFields = ["SYMLINK", "UNITNO"];

        // execute query task
        qtask.execute(query, false, mycallback);

      }

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

        //JS literal class esri.arcgis.gmaps.InfoWindowOptions without tabs
        var infoWindowOptions = {
          content:"<p>UNITID = <b>{SYMLINK}</b></br>Column Number = <b>{UNITNO}</b></p>"
        };

        gOverlays = mapExtension.addToMap(fset,overlayOptions,infoWindowOptions);
      }

    </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: 500px; height:500px;"></div>
            </td>
          </tr>


        </table>

      </td>
    </tr>
  </table>
  </body>
</html>
0 Kudos
0 Replies