I'm excluding the part where you're referencing Google Maps. I'm not entirely sure how that comes into play with this question.
Essentially you need to find the geometry of a country, with that you can pass that geometry into the geoprocessing service and have it use that instead of a "circle". Luckily there is a lot of data to be found on ArcGIS.com, including country boundaries.
The below code is very close to what you want to do. (It might actually work, but sampleserver1 is giving me CORS Cross domain issues and I'm not in a position to setup a proxy to make a good request. (My issue is beyond the scope of your initial question.) Below you can see that a button press starts everything. Pressing the button sets a definition express for Country = Spain
. (there are many different ways to perform a query). The selected featurelayer with the definition is sent as input to the geoprocessing service. You'll get back a response and the app is responsible for popping up a text box with the output.
Remember, the code below will probably not just run, but it shows the pattern you need to undertake.
Note - pieced together from GP Zonal Stats and other feature layer samples.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/Geoprocessor",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/string",
"esri/Color",
"dijit/registry",
"dijit/form/Button",
"dojo/domReady!"
],
function (Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
Geoprocessor, dom, on, parser, string, Color, registry
) {
parser.parse();
var featureLayer, map;
map = new Map("map", {
basemap: "streets",
center: [0, 0],
zoom: 3
});
gp = new Geoprocessor("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServer/PopulationSummary");
gp.setOutputSpatialReference({wkid:102100});
gp.on("execute-complete", displayResults);
var fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
// country boundary polygons
featureLayer = new FeatureLayer("http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0",
{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
map.addLayer(featureLayer);
function computeZonalStats() {
featureLayer.setDefinitionExpression("Country ='Spain'");
var params = { "inputPoly":featureLayer };
gp.execute(params);
}
function displayResults(evtObj) {
console.log(evtObj);
var results = evtObj.results;
var content = string.substitute("<h4>The population in the user defined polygon is ${number:dojo.number.format}.</h4>",{number:results[0].value.features[0].attributes.SUM});
registry.byId("dialog1").setContent(content);
registry.byId("dialog1").show();
}
app = {
computeZonalStats: computeZonalStats
};
});
</script>
</head>
<body class="claro">
<button id="querySpainButton" data-dojo-type="dijit/form/Button" onclick="app.computeZonalStats()">Query Spain</button>
<div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
<div data-dojo-type="dijit.Dialog" id="dialog1" title="Population Summary"></div>
</body>
</html>
https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer
-- the cell size looks to be about 4km x 4km. So it might not be as bad as I thought