Exploring the Google Maps API Search feature

Question

Exploring the Google Maps API Search feature

I am currently developing a JavaScript application that interfaces with the Google Maps API. The program has the following requirements:

Enable users to input a location.
Upon clicking the "find" button, convert the user's entered location into longitude and latitude coordinates.
Run an algorithm to calculate the distance between the user's entered location and 20 predefined longitude and latitude coordinates.
Display the calculated distance in kilometers.
Identify the location with the shortest distance by looping through and comparing all distances.

I have successfully completed steps 1 and 2, but I am struggling to identify a method for storing the index of a location, including its longitude and latitude points. This is crucial for comparing them to the user-inputted location. Additionally, I am having difficulty devising a strategy for determining the shortest distance among all points to find the closest longitude and latitude.

Any assistance would be greatly appreciated,

THANK YOU!

javascript arrays google-maps google-api

Answer 1

Answer №1

I believe this solution can be easily tweaked to suit your specific needs.

//function for computing distances between two points
var calculateDistance = function(point1, point2) {
  var radian = function(x) {return x*Math.PI/180;}
  var R = 6371; // average radius of the Earth in kilometers
  var dLat  = radian(point2.lat() - point1.lat());
  var dLong = radian(point2.lng() - point1.lng());

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(radian(point1.lat())) * Math.cos(radian(point2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var distance = R * c;

  return distance.toFixed(3);
}

// defining LatLng object with current coordinates
var currentPosition = new google.maps.LatLng(yourlat, yourlng);

// creating an array of hard coded LatLng objects 
var twentyPoints = {};
twentyPoints['name1'] = new google.maps.LatLng(lat1, lng1);
twentyPoints['name2'] = new google.maps.LatLng(lat2, lng2);
twentyPoints['name3'] = new google.maps.LatLng(lat3, lng3);
  ...

// finding the closest location
var closestLocationName, minDistance;
for (var name in twentyPoints) {
  tempMinDistance = calculateDistance(twentyPoints[name], currentPosition);
  if (minDistance === undefined || tempMinDistance < minDistance) {
    minDistance = tempMinDistance;
    closestLocationName = name;
  }
}

console.log('The nearest location is named ' + closestLocationName + '.');
console.log('It is ' + minDistance + 'km away.');

Answer 2

I believe this solution can be easily tweaked to suit your specific needs.

//function for computing distances between two points
var calculateDistance = function(point1, point2) {
  var radian = function(x) {return x*Math.PI/180;}
  var R = 6371; // average radius of the Earth in kilometers
  var dLat  = radian(point2.lat() - point1.lat());
  var dLong = radian(point2.lng() - point1.lng());

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(radian(point1.lat())) * Math.cos(radian(point2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var distance = R * c;

  return distance.toFixed(3);
}

// defining LatLng object with current coordinates
var currentPosition = new google.maps.LatLng(yourlat, yourlng);

// creating an array of hard coded LatLng objects 
var twentyPoints = {};
twentyPoints['name1'] = new google.maps.LatLng(lat1, lng1);
twentyPoints['name2'] = new google.maps.LatLng(lat2, lng2);
twentyPoints['name3'] = new google.maps.LatLng(lat3, lng3);
  ...

// finding the closest location
var closestLocationName, minDistance;
for (var name in twentyPoints) {
  tempMinDistance = calculateDistance(twentyPoints[name], currentPosition);
  if (minDistance === undefined || tempMinDistance < minDistance) {
    minDistance = tempMinDistance;
    closestLocationName = name;
  }
}

console.log('The nearest location is named ' + closestLocationName + '.');
console.log('It is ' + minDistance + 'km away.');

Exploring the Google Maps API Search feature

Answer №1

Similar questions

The file could not be located on the server during the project build and upload process

Experiencing a 403 Error while using request-promise to extract price data from a website

Load the page using AJAX and automatically scroll to the anchor within the loaded content

A step-by-step guide on disabling Google Analytics in a Next.js document.js file

Importing modules using relative paths results in failure due to module not being found, whereas employing absolute paths

The passport authentication process is malfunctioning as there seems to be an issue with the _verify function

Extracting text from an HTML file and passing it to an Express.js server: A beginner

What steps should I take to enable this SimpleModal to load automatically?

What is the best way to save a series of values into separate arrays and then combine them together in VBA?

Is there a definitive way to distinguish between scrollTop and scrollHeight in web development?

Uncovering the key based on the value in MongoDB

Internet Explorer failing to trigger Ajax requests

Is there a way to launch Visual Studio Code using a web browser?

Exploring the Factory Design Pattern Together with Dependency Injection in Angular

Dispatching information to a designated Google Analytics tracking code

Tips on showcasing Javascript filter outcomes after at least 2 characters have been entered

AngularJS Update Parent-Child Relationship: Enhancing the Details

Using jQuery to automatically select a specific radio button after the load() function is executed

An issue has been encountered with the Vue Router within the Micro Front End/Web Components setup, displaying the error message: "Uncaught TypeError:

The steps to implement an onchange function for displaying image previews in a profile image tag