CODEWITHSUNDEEP
javascriptperleventsmaps
Jim
Jim

Reputation: 1

Having a problem adding a call to a Perl CGI script from a Mouse Click Event Listener

I have a Google Maps javascript with a Mouse Click Event handler defined. On a mouse click, a popup window appears with the lat long position of the click. I am attempting to add calculating the distance and bearing the current and last mouse position clicks. My Perl CGI script is working fine, and can receive a lat and long as paramters in the URL address call. My Perl CGI script calculates the distance and bearing between the 2 mouse clicks and puts the data in a small single line file. My javascript logic for reading the small file works fine by itself. I am having a problem adding this logic to my event listener. Here is my current attempt that is not working:

// Configure the click listener.
map.addListener('click', function(mapsMouseEvent) {
 
  ret = "https://kjm.positiondatabase.com/cgi-bin/Distance?lat2=event.latLng.lat&long2=event.latLng.lng";
 
  const fs = require('fs');
  fs.readFile('/tmp/DataOUT.txt', (err, data) => {
    if (err) throw err;
  })
 
// Create a new InfoWindow.
  infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
  infoWindow.setContent(data.toString());
  infoWindow.open(map);
 
});

I am assuming the lat and long position of the mouse click is event.latLng.lat and event.latLng.lng. My Perl CGI script is not being called. If I remove the call to my Perl script, there are still problems. If anyone has any suggestions for how I can correct my script, all suggestions and help are appreciated. Thanks, Jim

Upvotes: 0

Views: 104

Answers (1)

simbabque
simbabque

Reputation: 54373

There are two major issues here.

1. You are never calling the Perl script.

All you do is put the URL in a variable, but not even with the appropriate parameters. It's just a string. There's no variable interpolation, so your lat and long params are just the strings event.latLng.lat and event.latLng.lng.

You say you want to calculate distance, but you're only passing (well, trying to pass) one set of coordinates.

If you put a console.log after the ret = "..." line, you'll see the output is just a string, and the event variable in your handler is actually called mapsMouseEvent.

Instead, you should construct that URL like this:

ret = "https://kjm.positiondatabase.com/cgi-bin/Distance?lat2=" 
    + mapsMouseEvent.latLng.lat 
    + "&long2=" + mapsMouseEvent.latLng.lng;

Of course you still need to actually make a request to your backend. I'll leave that to you.

2. Your user's browser cannot read your server's file system

  const fs = require('fs');
  fs.readFile('/tmp/DataOUT.txt', (err, data) => {
    if (err) throw err;
  })

This looks like you copied it from a NodeJS example. It's not how browser-based JS for web stuff works. Your JavaScript code runs in the client's browser, on their computer. That's not the same as the computer that runs your Perl script. That /tmp folder will be on the client's computer, and the Perl script cannot put files there.

In addition to that, the browser doesn't allow your JavaScript to access stuff on the user's computer (apart from cookies and things like that) for security reasons. Imagine every website could just rummage around in your local files.

What you need to do instead is make your Perl script return the results of the calculation. That's typically done by print-ing to STDOUT in the Perl script, and you would probably use a Content-Type like application/json and encode your response as JSON. This technique is called AJAX, which refers to XML, but is now typically done with JSON instead. Read up on it, and then implement an asynchronous call to the backend, and handle its response.

Upvotes: 1

Related Questions