Google Maps JS API. How to draw several circles on the map, with different radii, but with the same center, and pass the ID of each circle?

Question

JavaScript

Greetings.
Source data:
Google Maps, Vue.js frontend, map output via data (coordinates) received from the vue-google-autocomplete plugin .
Task number 1: based on the first point on the map, build three circles around it.
Let me explain. The first circle is, for example, green and has a radius of 2 km. The second is yellow, the radius is 5 km. Well, the third - red, 10 km. In this case, each next circle does not start from the middle (first point), but on the border with the previous circle (example: green from the point to yellow, yellow from the green edge to red, red from the yellow edge).
Task number 2: when setting the second point (also by coordinates obtained from vue-google-autocomplete), assign a technical variable, for example, the ID of the circle in which it hit. In other words, if the second point is in the yellow circle, we set const circle_zone = 2.
Interaction process (for a better understanding of tasks): a person orders a transfer, for example, to the airport. Selects, in fact, "Pulkovo Airport" in the autocommit field (thanks to the Vue plugin), then selects its address. He, next to this form, is drawn a map on which he sees the first point (airport) and from it three circles of different colors. Also, the second point (its address) is placed in one of the circles. Immediately there is a calculation of the cost and so on.
I will be glad to sensible comments and use cases! Thank you.

Answer 1

Calculating the distance in a straight line is probably the worst thing you can think of, any taxi driver will confirm. An example is a trip to the other side of the river. Use accessibility zones built on a road graph aka isochrones.