google-maps - Google マップ API - 複数のマーカーを最も近い道路にスナップする

Question

多くの場合、複数のポイントを最も近い通り (道路) にスナップしようとしています。実装をスナップしないと、私のコードは次のようになり、すべてのマーカーが正常に表示されます。

<script type="text/javascript"><!--//<![CDATA[
    function updateLocation(map, markersArray, labelsArray){
             $.ajax({                                      
                      url: 'update.php',                  //the script to call to get data          
                      data: "",                      
                      dataType: 'json',                //data format      
                      success: function(uniPoints){
                             clearMarkers(markersArray, labelsArray);
                             setMarkers(map, uniPoints, markersArray, labelsArray);                       
                    } 
                });
            }


            function initialize(uniPoints) {
              var myOptions = {
                zoom: 2,
                center: new google.maps.LatLng(0, 0),       
                mapTypeId: google.maps.MapTypeId.ROADMAP
              }
              var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              var markersArray = [];
              var labelsArray = [];
              setInterval(function() { updateLocation(map, markersArray, labelsArray); }, 20000 );
            }
        ...
        ...

地図上にマーカーを配置する機能:

            function setMarkers(map, locations, markersArray, labelsArray) {
              var image1 = new google.maps.MarkerImage('pimg/1.png',  new google.maps.Size(31, 37), new google.maps.Point(0,0), new google.maps.Point(0, 37));
              var imageActive1 = new google.maps.MarkerImage('pimg/1Active.png',  new google.maps.Size(31, 37), new google.maps.Point(0,0), new google.maps.Point(0, 37));
              var shadow = new google.maps.MarkerImage('pimg/taskShadow.png', new google.maps.Size(31, 37), new google.maps.Point(0,0), new google.maps.Point(0, 37));

              var shape = {
                  coord: [0, 0, 31, 37],
                  type: 'rect'
              };
              var bounds = new google.maps.LatLngBounds();
              for (var i = 0; i < locations.length; i++) {
                        var point = locations[i];
                        var myLatLng = new google.maps.LatLng(point[2], point[3]);

                                    var image=image1;

                        var marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            shadow: shadow,
                            icon: image,
                            shape: shape,
                            title: point[0],
                            zIndex: 3
                        });

                        marker.set('id', point[0]);
                        marker.set('type', point[1]);
                        var devId=0;
                       if (devId==point[1]){
                           var label = new Label({
                               map: map
                          }, '#0297af',  '#ffffff');
                       }else{
                            var label = new Label({
                           map: map
                          }, '#353638',  '#0297af');
                       }

                      label.set('zIndex', 1234);
                      label.set('id', point[0]);
                      label.bindTo('position', marker, 'position');
                      label.set('text', point[1]);

                      labelsArray.push(label);
                      markersArray.push(marker);

                      bounds.extend(myLatLng);
              }
                map.fitBounds(bounds);
            } 


           $(window).load(initialize);
//]]>--></script> 

インターネット ソリューションを検索した後、DirectionsService を使用して、最寄りの道路にポイントをスナップできることがわかりました。1つのポイントを取り上げると、次のように実装できます。

<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
    function initialize() {

        var homeLatlng = new google.maps.LatLng(24.696554,-81.328238);
        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var image = new google.maps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/green-dot.png',
            new google.maps.Size(32, 32),   // size
            new google.maps.Point(0,0), // origin
            new google.maps.Point(16, 32)   // anchor
        );

        var shadow = new google.maps.MarkerImage(
            'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
            new google.maps.Size(59, 32),   // size
            new google.maps.Point(0,0), // origin
            new google.maps.Point(16, 32)   // anchor
        );


        directionsService.route({origin:homeLatlng, destination:homeLatlng, travelMode: google.maps.DirectionsTravelMode.DRIVING}, function(response, status) {

            if (status == google.maps.DirectionsStatus.OK)
          {
            var homeMarker = new google.maps.Marker({
              position: response.routes[0].legs[0].start_location, 
              map: map,
              title: "Check this cool location",
              icon: image,
              shadow: shadow
            });
          } else {
            var homeMarker = new google.maps.Marker({
              position: homeLatlng,
              map: map,
              title: "Check this cool location",
              icon: image,
              shadow: shadow
            });
          }
    });

    }

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

ただし、コードを試してみると、マップにマーカーが表示されません。問題は、DirectionsService が非同期で動作することです...複数のマーカーを配置し、それぞれを最も近い道路 (道路) にスナップする最初のコードを変更するソリューションのアイデアを持っている人はいますか?