JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <label for="xGps">xGps</label>
    <input id="xGps" type="number" value="0" />
    <label for="yGps">yGps</label>
    <input id="yGps" type="number" value="0" />
    
    <div id="result"></div>
    <img id="mapImg" src="" />
</body>

CSS

img#mapImg {
    display: none;
}

JavaScript

$("#xGps, #yGps").change(function() {
    var img = document.getElementById('mapImg');
    
    // Bypass the security issue : drawing a canvas from an external URL.
    img.crossOrigin='anonymous';
    
    var xGps = $("#xGps").val();
    var yGps = $("#yGps").val();
    
    var mapUrl = "http://maps.googleapis.com/maps/api/staticmap?center=" + xGps + "," + yGps +
        "&zoom=14&size=20x20&maptype=roadmap&markers=color:red%7C$xGps,$yGps&sensor=false";
    
    // mapUrl += "&key=" + key;
    
    $(img).attr("src", mapUrl);
    
    var canvas = $('<canvas/>')[0];
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    
    var pixelData = canvas.getContext('2d').getImageData(1, 1, 1, 1).data;
    
    if (pixelData[0] == 164 &&
        pixelData[1] == 190 &&
        pixelData[2] == 220) {
        $("#result").html("Water");
    } else {
        $("#result").html("Not water");
    }
});