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>