2

Lots of time, i'm trying to snap multiple points to nearest street (road). Without snapping implementation, my code looks like that and it shoes all markers sucesfully:

<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 to put markers on map:

            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> 

After searching on internet solution, I found that possible to snap point to nearest road can be implemented using DirectionsService. If we are taking one point, it can be implemented in such way:

<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>

However, when I try in my code, no markers appears on map. It seems the problem is that DirectionsService works asynchronous... Who have ideas for solution changing first code which puts multiple markers and snaps each of them to nearest street (road)?

wahas
  • 53
  • 1
  • 6
  • possible duplicate of [Google maps API - snap multiple points each to nearest road](http://stackoverflow.com/questions/16721754/google-maps-api-snap-multiple-points-each-to-nearest-road) – geocodezip May 29 '13 at 06:05
  • Per your answer to [this question](http://stackoverflow.com/questions/16696502/google-maps-api-snap-marker-to-nearest-road), you have "from 2 to ~10. Locations updates every 5 seconds." You are going to run into the rate limit if you use the directions service for this. Do your points move? – geocodezip May 29 '13 at 06:09
  • Yes, the points are moving.. It seems that no possibility to implement such script.. – wahas Nov 17 '13 at 10:11

0 Answers0