如何通过单击Google Map 上的POI标记直接向路线添加目的地（航点）

我正在实施一项与Google Map 相关的功能 - 旅行计划，可以让用户在Google Map 上自定义自己的旅行路线 . 但是，我只是实现了一个功能，允许用户通过向数据库提交lat / long来创建旅程的目的地（航点），然后在加载TripDetailed视图时在谷歌 Map 上显示这些航点数据 . 当我看到公路旅行者网站时，它有一个非常酷的功能，让用户通过点击Google Map 上的POI标记直接向路线添加目的地（航路点），也就是当用户点击特定的POI时，它会生成带有“添加到旅行”按钮的信息窗口 . 当用户单击该按钮时，所选POI将作为航点添加到现有行程路线中，并且谷歌 Map 将更新行程路线 .

This is my trip plan view

I'd like to click this POI to set it as one of my waypoint in the current route

这是我的JS代码：

//Calculate Destination and Display Route on the Google Maps
            function calculateDisplayRoute(directionsDisplay, directionsService) {
                var waypts = [];
                for (var i = 1; i < destinationcount - 1; i++) { //Get rid of the starting and ending point
                    waypts.push({
                        location: new google.maps.LatLng(Lats[i], Lngs[i]),
                        stopover: true
                    });
                }
                            
                google.maps.event.addListener(map, 'click', function (event) {                    
                //I WANT TO IMPLETEMENT WHEN USER CLICK A POI MARKER ON MAP, IT CAN BE PUSH INTO THE waypts[] array
                    waypts.push({
                        location: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
                        stopover: true
                    });                    
                    //alert(event.latLng.lat() + ", " + event.latLng.lng());
                });
            
                // Retrieve the start and end locations and create a DirectionsRequest using
                // DRIVING directions.
                directionsService.route({
                    origin: start,
                    destination: end,
                    waypoints: waypts, // Since we need to matching the order sequence with the list on the right, we do not need the optimized waypoints
                    travelMode: 'DRIVING'
                }, function (response, status) {
                    // Route the directions and pass the response to a function to create
                    // markers for each step.
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                        renderDirectionsPolylines(response);
                    } else {
                        if (status === 'ZERO_RESULTS') {
                            window.alert('Directions request failed due to No route could be found between the origin and destination.');
                            for (i = 0; i < destinationcount - 1; i++) {
                                var id = i + 1;
                                document.getElementById("distance." + id).innerHTML = " Unable to get the distance from the next destination of the current trip.";
                            }
                            document.getElementById("distance." + destinationcount).innerHTML = " This is the end of your trip.";
                            document.getElementById("totaldistance").innerHTML = " Unable to get the total distance of the current trip";
                        }
                        if (status === 'UNKNOWN_ERROR') {
                            window.alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
                        }
                        if (status === 'REQUEST_DENIED') {
                            window.alert('The webpage is not allowed to use the directions service.');
                        }
                        if (status === 'OVER_QUERY_LIMIT') {
                            window.alert('The webpage has gone over the requests limit in too short a period of time.');
                        }
                        if (status === 'NOT_FOUND') {
                            window.alert('At least one of the origin, destination, or waypoints could not be geocoded.');
                        }
                        if (status === 'MAX_WAYPOINTS_EXCEEDED') {
                            window.alert('Too many DirectionsWaypoints were provided in the DirectionsRequest. Up to 23 waypoints allowed in each request, plus the origin and destination.');
                        }
                        if (status === 'INVALID_REQUEST') {
                            window.alert('The DirectionsRequest provided was invalid.');
                        }

                    }
                });
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

这是我的js代码，为当前的行程路线添加一个新的目的地（航点），它可以在点击 Map 时获得lat / lng，但我不知道为什么它不能被推入waypoint []数组：

//I WANT TO IMPLETEMENT WHEN USER CLICK A POI MARKER ON MAP, IT CAN BE PUSH INTO THE waypts[] array
                    waypts.push({
                        location: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
                        stopover: true
                    });                    
                    //alert(event.latLng.lat() + ", " + event.latLng.lng());
                });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

任何人都可以给我一些关于如何在javascript中实现此功能的提示吗？非常感谢 .