I have a problem about “undefined site(a returned variable)”.
The code is attached.
The code is simple to get geolocation from a geotagged images through Exif library.
getExif() is a function to return a variable “site” whose type is google.maps.LatLng.
But somehow the returned value is undefined.
Weird is that some console.log() in the function is put at the end of the program,
even after console.log(“xxxxxxxxxxxxxxxx”), which is called way after the function.
Also I have tested by defining getExif2(); which simply returns a fixed value of google.maps.LatLng.
This works fine and returns the fixed value.
I think the fundamental difference between getExif() and getExif2() is calling Exif function or not.
I am suspecting exif function takes time because it processes a image file; the program goes next
without waiting the function finished. That is why the order of function has been changed, i.e. console.log(“xxxxxxxx”) is executed earlier and the variable “site” has not been set yet.
Any help would be appreciated.
Developped on Firefox 113.0.2 (Ubuntu 20.04).
Warm Regards,
DoKtor.
Geotagged image: please download below and save as ./london-bridge.jpg.
https://www.geoimgr.com/images/samples/england-london-bridge.jpg
Note: a google API key is set in my real script.
Code:
test_stackoverflow20240808.html
<!Doctype html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap&loading=async"></script>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script type="text/javascript">
<!--header("Access-Control-Allow-Origin: *");-->
var Gsite;
var site;
var sites = [];
function getExif(image) { // image as Image().src = "./image.jpg";
console.log("getExif() called");
console.log("getExif() called with: "+ image.src);
var site = new google.maps.LatLng(0,0);
console.log("site: "+site);
//return site;
EXIF.getData(image, function() {
myData=this;
var make = EXIF.getTag(this, "Make");
var model = EXIF.getTag(this, "Model");
var makeAndModel = document.getElementById("makeAndModel");
makeAndModel.innerHTML = `${make} ${model}`;
console.log("makeAndModel: "+ make + " " + model);
// get latitude from exif data and calculate latitude decimal
var latDegree = myData.exifdata.GPSLatitude[0].numerator;
var latMinute = myData.exifdata.GPSLatitude[1].numerator;
var latSecond = myData.exifdata.GPSLatitude[2].numerator;
var latDirection = myData.exifdata.GPSLatitudeRef;
var latFinal = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
lat=latFinal;
console.log("latFinal: "+latFinal);
// get longitude from exif data and calculate longitude decimal
var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
var lonSecond = myData.exifdata.GPSLongitude[2].numerator;
var lonDirection = myData.exifdata.GPSLongitudeRef;
var lonFinal = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);
lng=lonFinal;
console.log("lonFinal: "+lonFinal);
site = new google.maps.LatLng(latFinal, lonFinal);
console.log(site);
//sites.push(site);
return(site);
});
}
function ConvertDMSToDD(degrees, minutes, seconds, direction) {
var dd = degrees + (minutes/60) + (seconds/360000);
if (direction == "S" || direction == "W") {
dd = dd * -1;
}
return dd;
}
function getExif2(image) {
site = new google.maps.LatLng(50.0, 60.0);
console.log(site);
sites.push(site);
return(site);
}
function initialize() {
console.log("initialize() called.");
var img1 = document.getElementById("img1");
console.log("img1: "+img1);
Gsite=getExif(img1);
console.log("img1 site: "+Gsite);
console.log("xxxxxxxxxxxxxxxxxxxxxxxxxx");
Gsite=getExif2(img1);
console.log("img1 site: "+Gsite);
console.log("yyyyyyyyyyyyyyyyyyyyyyyyyy");
}
function initMap() {
console.log("initMap called.");
initialize();
}
</script>
</head>
<!--<body onload="initialize()">-->
<body>
<img width=300 id="img1" src="london-bridge.jpg" />
<pre>Make and model: <span id="makeAndModel"></span></pre>
<br/>
</body>
</html>