How to load or download points on Google Maps when clicking a div?

Question

I have a page that shows the paths a vehicle has traveled. Routes will be shown in an ordered list arranged horizontally in the style of the Timestack Timeline (http://isaaccambron.com/timestack/), except that they will not be on top of each other, but side by side, organized according to the times when they occurred. For each path, a list item will be created and I would like when the user clicked on a path (a colored button with the path number), the path points (which will be stored in a multidimensional array) would be shown on the map and the div would be highlighted/selected. When the user clicks on another route, another div is selected, other points are shown on the map and the previous div "loses" the selection and the points of that div are taken from the map.

I searched the internet and found no library that has this specific functionality. If anyone can give me some direction.

I believe that to show the points on the map or stop showing the previous points, I will have to use AJAX, correct?

Answer 1

I suggest you take a look -> Gmaps.js

I’m not sure if it will solve your problem, but for all the applications involving google maps that I needed to develop until today this API gave account, besides the fact that it is super simple to work with it.

Note: I saw that you commented on the use of AJAX. I’ve had a lot of problems using AJAX maps, so here’s a tip if you need to: leave the fixed map only by clicking once on the page load, and then just work adding/repositioning/removing markers(points) on it.

'/