Hi jens,try this
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.enableScrollWheelZoom();
//Create MapExtension utility class
mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);
// Query Task
qtask = new esri.arcgis.gmaps.QueryTask(mapServiceURL+layerID);
// 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() {
// clear map overlays and event listeners using MapExtension removeFromMap
gmap.clearOverlays();
// set query parameters
query.returnGeometry = true;
query.outFields =["ATTR1","ATTR2","ATTR3"];
// execute query task
qtask.execute(query, false, mycallback);
}
function mycallback(fset) {
var features = fset.features, feature, attributes, i;
var r = "<table id='resTable'><tr><th>Column1</th><th>Column2</th><th>Column3</th></tr>";
for (i = 0; i < features.length; i++) { // process each city in the feature set
feature = features;
attributes = features.attributes;
gOverlays = mapExtension.addToMap(feature);
r = r + "<tr><td>" + attributes["ATTR1"] + "</td>"
+ "<td>" + attributes["ATTR2"] + "</td>"
+ "<td>" + attributes["ATTR3"] + "</td>"
+ "</tr>";
}
r = r + "</table>";
//insert the table in the div with id=results (this could be your side panel)
document.getElementById('results').innerHTML = r;
}
Then you can style the table with css. In alternative, you may change the code and use the attribute array (r) dojo datastore item and populate a dojogrid instead of an html table