SnapToRoadのレスポンスを使用するには？

Question

私はjavascriptコードでGoogleマップSnapToRaodレスポンスを受け取る方法を知りたいと思います。また、SnapToRoadレスポンス（JavaScriptでも同様）でマップを生成するためにレスポンスを使用する方法を知りたいと思います。私はこのようなことをhtmlページでやろうとしています。

私は既にAPIキーをテストしていますが、動作しています。私はroads.googleapis.comからの回答を受け取りましたが、これらの質問に役立つものは見つかりませんでした。

Answer 1

例（Android端末のGPSから取得したデータ37点、250点のデータセット2つ、DP簡略化後17ポイント、503の第2セットからDP単純化で37ポイントに縮小）返されたデータをGoogle Maps JavaScript API v3マップにポリラインとして表示します。

注：の最大要求は100ポイントです。

コードスニペット：

function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 14, 
 
    center: { 
 
     lat: 0, 
 
     lng: 0 
 
    } 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    //add each waypoint to an array of lat/lngs 
 
    $.each(trip, function(key, waypoint) { 
 
    unsnappedWaypoints.push(waypoint.lat + ',' + waypoint.lng); 
 
    // raw data from the GPS is the little red dots 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     icon: { 
 
     url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
 
     size: new google.maps.Size(7, 7), 
 
     anchor: new google.maps.Point(1.5, 1.5), 
 
     scaledSize: new google.maps.Size(3,3) 
 
     }, 
 
     position: { 
 
     lat: waypoint.lat, 
 
     lng: waypoint.lng 
 
     }, 
 
     title: "" + waypoint.lat + "," + waypoint.lng 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    map.fitBounds(bounds); 
 
    }); 
 
    //perform Google Maps API call with joined array for snapped results 
 
    $.ajax({ 
 
    url: 'https://roads.googleapis.com/v1/snapToRoads?path=' + unsnappedWaypoints.join('|') + '&key=AIzaSyA1JWR3ohBFQ_P7F5eSMSJb0dwV9PbB3pA&interpolate=true', //true', 
 
    crossDomain: true, 
 
    dataType: 'jsonp' 
 
    }).done(function(response) { 
 
    if (response.error) { 
 
     alert("error" + response.error.message); 
 
     return; 
 
    } 
 
    //create polyline from snapped waypoints 
 
    var tripRoute = new google.maps.Polyline({ 
 
     path: [], 
 
     gseodesic: true, 
 
     strokeColor: '#663496', 
 
     strokeOpacity: 1.0, 
 
     strokeWeight: 2 
 
    }); 
 

 
    tripRoute.setMap(map); 
 
    //iterate through returned waypoints to create array of lat/lngs for polyline 
 
    $.each(response, function(key, snappedPoints) { 
 
     $.each(snappedPoints, function(key, snappedPoint) { 
 

 
     snappedWaypoints.push({ 
 
      lat: snappedPoint.location.latitude, 
 
      lng: snappedPoint.location.longitude 
 
     }); 
 
     tripRoute.setPath(snappedWaypoints); 
 
     //add snapped waypoints to map to show difference between originals and returned 
 
     // snapped points are the slightly bigger blue dots 
 
     var marker = new google.maps.Marker({ 
 
      map: map, 
 
      icon: { 
 
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png", 
 
      size: new google.maps.Size(7, 7), 
 
      anchor: new google.maps.Point(2.5, 2.5), 
 
      scaledSize: new google.maps.Size(5,5) 
 
      }, 
 
      position: { 
 
      lat: snappedPoint.location.latitude, 
 
      lng: snappedPoint.location.longitude 
 
      }, 
 
      title: "" + snappedPoint.location.latitude + "," + snappedPoint.location.longitude 
 
     }); 
 

 
     //increase the bounds to take into account waypoints 
 
     bounds.extend(new google.maps.LatLng(snappedPoint.location.latitude, snappedPoint.location.longitude)); 
 
     }); 
 
    }); 
 
    }).fail(function(jqXHR, textStatus, errorThrown) { 
 
    alert(textStatus + ":" + errorThrown); 
 
    });; 
 

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

 
//setup vars 
 
var trip = [{lat:32.85420, lng:-117.20454}, 
 
{lat:32.85206, lng:-117.20391}, 
 
{lat:32.84934, lng:-117.20415}, 
 
{lat:32.84851, lng:-117.20391}, 
 
{lat:32.84749, lng:-117.20318}, 
 
{lat:32.84377, lng:-117.19893}, 
 
{lat:32.84269, lng:-117.19798}, 
 
{lat:32.84095, lng:-117.19719}, 
 
{lat:32.83776, lng:-117.19611}, 
 
{lat:32.83749, lng:-117.19637}, 
 
{lat:32.83614, lng:-117.19876}, 
 
{lat:32.83609, lng:-117.20142}, 
 
{lat:32.83357, lng:-117.20144}, 
 
{lat:32.83339, lng:-117.20261}, 
 
{lat:32.83234, lng:-117.20445}, 
 
{lat:32.83089, lng:-117.20434}, 
 
{lat:32.83084, lng:-117.20419}, 
 
{lat:32.83102, lng:-117.20390}, 
 
{lat:32.83092, lng:-117.20352}, 
 
{lat:32.83190, lng:-117.20346}, 
 
{lat:32.83172, lng:-117.20170}, 
 
{lat:32.83258, lng:-117.20114}, 
 
{lat:32.83321, lng:-117.20048}, 
 
{lat:32.83404, lng:-117.19914}, 
 
{lat:32.83442, lng:-117.19745}, 
 
{lat:32.83447, lng:-117.19506}, 
 
{lat:32.83468, lng:-117.19480}, 
 
{lat:32.83547, lng:-117.19493}, 
 
{lat:32.83716, lng:-117.19570}, 
 
{lat:32.84101, lng:-117.19702}, 
 
{lat:32.84288, lng:-117.19790}, 
 
{lat:32.84383, lng:-117.19874}, 
 
{lat:32.84763, lng:-117.20308}, 
 
{lat:32.84844, lng:-117.20372}, 
 
{lat:32.84951, lng:-117.20400}, 
 
{lat:32.85235, lng:-117.20377}, 
 
{lat:32.85437, lng:-117.20438}]; 
 

 
var unsnappedWaypoints = []; 
 
var snappedWaypoints = [];

<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"></script> 
 
<div id="map" style="height: 400px; width: 500px"></div>