javascript - クリックでGoogleマップにルートを描く

Question

私がやろうとしているのは、Google マップをクリックしてマーカーを配置し、これらのマーカー間にルートを描くことです。これは機能しますが、私が直面している問題は次のとおりです:(マップの画像を表示してください)

(1) google map を 3 回クリックすると、ルートが完全に描画されます。（つまり、最初にクリックAしBてからC場所をクリックします）

(2) 次に、Google マップを 4 回クリックすると、場所は次のようになりますDが、マップは次のようになります。

ここでは、B場所が置換または非表示になり、代わりにB,Cが表示され、同じ...

(3) Google マップを 5 回クリックすると、場所は になるはずですEが、マップは次のようになります。

つまり、Google マップで 5 回クリックすると、ルートは「A,B,C,D,E」になるはずです。代わりに、「A、E、F、G、H」と表示されます。

完全なコードは次のとおりです。

<script>
    var waypts=[];
    var ways=[];
    function initialize() {
        var geocoder = new google.maps.Geocoder();
        var mapOptions = {
                            zoom: 11,
                            center: new google.maps.LatLng(23.0171240, 72.5330533),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                         };
        var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

        google.maps.event.addListener(map, 'click', function(e) {
            placeMarker(e.latLng, map);
            var input=e.latLng;
            var lat = parseFloat(input.lat());
            var lng = parseFloat(input.lng());
            var latlng = new google.maps.LatLng(lat, lng);
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var add=results[1].formatted_address;
                    waypts.push({
                        location:add,
                        stopover:true
                    });
                    //alert(JSON.stringify(waypts));
                    if(waypts.length>2) {
                        for ( var i = 1; i <= waypts.length - 2 ; i++) {
                            ways.push({
                                location:waypts[i].location,
                                stopover:true
                            });
                        }
                    }
                    makeroute(waypts);
                }
            });
        });

        <!--  **************    for route between markers   *******************  -->
        function makeroute(waypts){
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer({
                suppressMarkers: false, //false it if you want a marker from the direction service
                polylineOptions: {
                    strokeColor: 'green', //"black",
                    strokeOpacity: 1.0,
                    strokeWeight: 3
                }
            });

            var start = waypts[0].location;//"Bopal, Ahmedabad, Gujarat, India";
            var end = waypts[waypts.length-1].location;//"Nikol, Ahmedabad, Gujarat, India";

            if(waypts.length>1) {
                var request = {
                                 origin:start,
                                 destination:end,
                                 waypoints:ways,
                                 travelMode: google.maps.DirectionsTravelMode.DRIVING
                               };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });

                directionsDisplay.setMap(map);
                google.maps.event.addDomListener(window, 'load', initialize);
            }
        }
    }

    function placeMarker(position, map) {
        var marker = new google.maps.Marker({
            position: position,
            //map: map
        });
        // map.panTo(position);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

後で更新

directionsDisplay.setPanel(document.getElementById('a'));完全なルート情報 に使用します。

Googleマップをクリックするたびに表示され、ルートが繰り返されます。A1 回目のクリック 、2 回目のクリックA to B、3 回目のクリック以外の意味。また、いくつかのポイントがマージされA to B to CたB to Cことも表示されます。たとえば、B and C同じ場所があり、地図上Cにのみ表示されます。