How to display closest marker on button click in javascript?

Question

Hi, I'm working on project Map Todo where I placed markers with locations which made as objects and placed in array. After that I made function that determines the distance between the markers and compares them with my starting position. In the console.log I get sorted markers by distance but I should now on button click to call function FIND CLOSEST MARKER which should give me the closest of those sorted markers?
https://code.sololearn.com/W2MLzQLZ9gy5/?ref=app

Answer 1

I never worked with google maps, but i managed to log some distances and names.Hope you can use this and solve your problem.
This look like your array is sorted, so with index of 0 i get closest.
With Object.key(object) i get every keys od this object (sololearn console dont show what is inside)

https://code.sololearn.com/WQ2vaCiQYdT5/?ref=app

Answer 2

I updated code to display name of closest to div

https://code.sololearn.com/WQ2vaCiQYdT5/?ref=app

Answer 3

Probably you are right about initMap(), but i dont know how to make it work.
This video look like it cover a lot about google maps api.
Maybe he explain how to do something like you trying.
You will for sure learn something now if you watch this.

https://youtu.be/BkGtNBrOhKU

Answer 4

Do you need app to redirect user to closest location when click button, or just to show info about this location in some div for example?

For redirection you probably need to give google map some data, like you do for start location.

Answer 5

In code i edited i accessed your sorted array with index of 0.
If you do good job for sorting, than index 0 will work.
But with this index we got object what have many keys-values, thats why i used Object.keys(nameOfObj) to log each key, and i can see name(title) of closest location, and some other information.
To access all data for this location i used "array.map()"
to loop trought array of location, then searched for other data about closest using its title (because i see i can access title, didnt check code on pc to see exacly what object have).

If this is not what you are looking for i hope someone else will help you.

Answer 6

maybe you didn't understand me, I get sorted markers in console, I have that function find_closest_marker under compare function, where I should display the nearest one? What that function would look like?

Answer 7

No redirection, only to display the nearest of the four locations from the array. Can also be printed in console.log

Answer 8

my boss left the comment // orderMarkers[currentIndex], a comment below he expects me to make that logic .

I have on the top of the file:
let indexOfCurrentClosestMarker = 0;

Do I need to read them by index?

Answer 9

Yeah, tnx for helping me, I understand what you are telling me and I managed to get a printout of that nearest location, e.g.

function find_closest_marker() {
let closestMarker = markers[0]
alert('Closest location is ' + closestMarker.getTitle());
}

Do you have any idea how to redirect to this same marker[0] in this same function, when user clicks to go to this closest marker?

Answer 10

I tried something like this but nothing happens on click.

function find_closest_marker () {
let closestMarker = markers[0]
google.maps.event.trigger("click", closestMarker);
}

This probably doesn't work because this function is outside of initMap() function.