javascript google-maps google-maps-api-3 google-roads-api

Roads API Snap to Road Using GeoJSON

I have 3 LineString features. I am trying to send coordinates from these 3 LineString features to the Roads API so I can get clean, snapped lines on the map. I've been trying to adapt the example outlined by Google, but for GeoJSON features. On map load, all 3 features should snap to Google's road network.

The problem is that I'm getting an error even though I thought I was passing the coordinates correctly as the "path". The error code I get is 400, with message "\"path\" contains an invalid value and status: "INVALID_ARGUMENT.

Code Snippet:

var data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-73.97056102752686, 40.74811853855757], [-73.96944522857666, 40.74953279908402], [-73.96798610687256, 40.75135341202851], [-73.97109746932983, 40.75314146550602], [-73.97472381591797, 40.75346656097219], [-73.97573232650755, 40.75182481261268], [-73.97721290588379, 40.750768220446936], [-73.97757768630981, 40.74940275339479] ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-73.96279335021973, 40.75512452312348], [-73.96549701690674, 40.75109332751696], [-73.96974563598633, 40.74719193776603], [-73.9726209640503, 40.74481848035928], [-73.97279262542723, 40.74137193935539] ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-74.00107383728026, 40.75931800754126], [-73.99519443511963, 40.757270059827206], [-73.99536609649658, 40.75453936473234], [-73.99888515472412, 40.75304393655622] ] } }] };

var apiKey = 'AIzaSyA5KqqUzvJyoC9msz_70ns-CdAF33N-6tM';

var map;
var snappedCoordinates = [];
var coords;
var subArray;
var placeIdArray = [];
var finalArray = [];

function initMap() {
  var mapOptions = {
    zoom: 13,
    center: {
      lat: 40.749481,
      lng: -73.974290
    }
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  map.data.addGeoJson(data);

  // Snap-to-road when the polyline is completed.
  /*drawingManager.addListener('polylinecomplete', function(poly) {
    var path = poly.getPath();
    polylines.push(poly);
    placeIdArray = [];
    runSnapToRoad(path);
  });*/

  var lines = data.features;
  for (var i = 0; i < lines.length; i++) {
    coords = lines[i].geometry.coordinates;
    // console.log("initial array: ", coords.toString());
    subArray = [coords.toString()];
    // console.log('sub array: ', subArray);

    runSnapToRoad(subArray);
  }
  
}

// Snap a user-created polyline to roads and draw the snapped path
function runSnapToRoad(path) {
  // var pathValues = [];
  // console.log(path);
  // for (var i = 0; i < finalArray.length; i++) {
    // pathValues.push(finalArray.getAt(i).toUrlValue());
  //}

  $.get('https://roads.googleapis.com/v1/snapToRoads', {
    interpolate: true,
    key: apiKey,
    path: path.join('|')
  }, function(data) {
    processSnapToRoadResponse(data);
    drawSnappedPolyline();
  });
}

// Store snapped polyline returned by the snap-to-road service.
function processSnapToRoadResponse(data) {
  snappedCoordinates = [];
  placeIdArray = [];
  for (var i = 0; i < data.snappedPoints.length; i++) {
    var latlng = new google.maps.LatLng(
      data.snappedPoints[i].location.latitude,
      data.snappedPoints[i].location.longitude);
    snappedCoordinates.push(latlng);
    placeIdArray.push(data.snappedPoints[i].placeId);
  }
}

// Draws the snapped polyline (after processing snap-to-road response).
function drawSnappedPolyline() {
  var snappedPolyline = new google.maps.Polyline({
    path: snappedCoordinates,
    strokeColor: 'black',
    strokeWeight: 3
  });

  snappedPolyline.setMap(map);
  polylines.push(snappedPolyline);
}

$(window).load(initMap);

 html,
 body,
 #map {
   height: 100%;
   margin: 0px;
   padding: 0px
 }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5KqqUzvJyoC9msz_70ns-CdAF33N-6tM"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>

JSFiddle: https://jsfiddle.net/y6nkjhfh

Solution

You have the points in the wrong format for the snap to roads API.

path — The path to be snapped. The path parameter accepts a list of latitude/longitude pairs. Latitude and longitude values should be separated by commas. Coordinates should be separated by the pipe character: "|".

Your points are in the order longitude/latitude (that is what GeoJSON specifies), and are not separated by the "|" pipe character.

To put them in the correct format:

for (var i = 0; i < lines.length; i++) {
  var coords = [];
  for (var j=0; j<lines[i].geometry.coordinates.length; j++) {
     coords.push([lines[i].geometry.coordinates[j][1],lines[i].geometry.coordinates[j][0]]);
  }
  console.log('array: ', coords);
  runSnapToRoad(coords);
}

proof of concept fiddle (the snapped lines are blue)

updated code snippet:

function initMap() {
  var mapOptions = {
    zoom: 13,
    center: {
      lat: 40.749481,
      lng: -73.974290
    }
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  map.data.addGeoJson(data);

  var lines = data.features;
  for (var i = 0; i < lines.length; i++) {
    var coords = [];
    for (var j = 0; j < lines[i].geometry.coordinates.length; j++) {
      coords.push([lines[i].geometry.coordinates[j][1], lines[i].geometry.coordinates[j][0]]);
    }
    console.log('array: ', coords);
    runSnapToRoad(coords);
  }
}

// Snap a user-created polyline to roads and draw the snapped path
function runSnapToRoad(finalArray) {
  $.get('https://roads.googleapis.com/v1/snapToRoads', {
    interpolate: true,
    key: apiKey,
    path: finalArray.join('|')
  }, function(data) {
    processSnapToRoadResponse(data);
    drawSnappedPolyline();
  });
}

// Store snapped polyline returned by the snap-to-road service.
function processSnapToRoadResponse(data) {
  snappedCoordinates = [];
  placeIdArray = [];
  for (var i = 0; i < data.snappedPoints.length; i++) {
    var latlng = new google.maps.LatLng(
      data.snappedPoints[i].location.latitude,
      data.snappedPoints[i].location.longitude);
    snappedCoordinates.push(latlng);
    placeIdArray.push(data.snappedPoints[i].placeId);
  }
}

// Draws the snapped polyline (after processing snap-to-road response).
function drawSnappedPolyline() {
  var snappedPolyline = new google.maps.Polyline({
    path: snappedCoordinates,
    strokeColor: 'blue',
    strokeWeight: 3
  });
  snappedPolyline.setMap(map);
  polylines.push(snappedPolyline);
}

$(window).load(initMap);
var data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-73.97056102752686, 40.74811853855757],
        [-73.96944522857666, 40.74953279908402],
        [-73.96798610687256, 40.75135341202851],
        [-73.97109746932983, 40.75314146550602],
        [-73.97472381591797, 40.75346656097219],
        [-73.97573232650755, 40.75182481261268],
        [-73.97721290588379, 40.750768220446936],
        [-73.97757768630981, 40.74940275339479]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-73.96279335021973, 40.75512452312348],
        [-73.96549701690674, 40.75109332751696],
        [-73.96974563598633, 40.74719193776603],
        [-73.9726209640503, 40.74481848035928],
        [-73.97279262542723, 40.74137193935539]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-74.00107383728026, 40.75931800754126],
        [-73.99519443511963, 40.757270059827206],
        [-73.99536609649658, 40.75453936473234],
        [-73.99888515472412, 40.75304393655622]
      ]
    }
  }]
};

var apiKey = 'AIzaSyA5KqqUzvJyoC9msz_70ns-CdAF33N-6tM';

var map;
var snappedCoordinates = [];
var coords;
var subArray;
var placeIdArray = [];
var finalArray = [];
var polylines = [];

html,
body,
#map {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

#bar {
  width: 240px;
  background-color: rgba(255, 255, 255, 0.75);
  margin: 8px;
  padding: 4px;
  border-radius: 4px;
}

#autoc {
  width: 100%;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>