How do I highlight a road on a Google map? - google-maps

Question

I wish to highlight a Google map of Lincoln, NE. according to regions defined by the Multiple Listing Services (MLS) map of the city. This region map can be found here:
http://www.lincolnrealtors.com/pdf/MLS_Area_Map
I can construct simple polygons for example hightlighting region 31 in the diagram above using:
// Define the LatLng coordinates for the polygon's path.
var Region31 = [
{lat:40.813614, lng: -96.682262},
{lat: 40.813484, lng: -96.644154},
{lat: 40.788145, lng: -96.644154},
{lat: 40.8027, lng: -96.682348},
{lat: 40.813614, lng: -96.682262}
];
But those are only lines when in reality, the MLS regions are delineated in terms of actual highways. For example, region 31 has its lower border along "Normal Blvd" which is not a straight line as you can see by looking at the Google map.
Is there a means of highlighting a particular length of highway in Google Maps and if so, could someone explain this or suggest a reference?
Thanks,
Dominic

Answer 1

You can use the DirectionsService to return polylines that follow the roads.
proof of concept fiddle (I needed to adjust some of your points to avoid the directions service adding extra turns)
code snippet:
var geocoder;
var map;
// Define the LatLng coordinates for the polygon's path.
var Region31 = [{
lat: 40.813436,
lng: -96.682268
}, {
lat: 40.813363,
lng: -96.644167
}, {
lat: 40.788145,
lng: -96.644154
}, {
lat: 40.8027,
lng: -96.682348
}, {
lat: 40.813435,
lng: -96.682267
}];
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < Region31.length; i++) {
var marker = new google.maps.Marker({
position: Region31[i],
map: map,
draggable: true
});
bounds.extend(marker.getPosition());
var directionsService = new google.maps.DirectionsService();
directionsService.route({
origin: Region31[i],
destination: Region31[(i + 1) % Region31.length],
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
preserveViewport: true
})
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Answer 2

The only api came in my mind is Polyline.