Comment mettre en surbrillance une route sur une carte Google?

Question

Je souhaite mettre en évidence une carte Google de Lincoln, NE. selon les régions définies par la carte MLS (Multiple Listing Services) de la ville. Cette carte de la région se trouve ici: http://www.lincolnrealtors.com/pdf/MLS_Area_Map

Je construis des polygones simples par exemple la région hightlighting 31 dans le schéma ci-dessus en utilisant:

// 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} 
    ]; 

Mais ce sont seulement des lignes alors qu'en réalité, les régions MLS sont délimitée en termes de routes réelles. Par exemple, la région 31 a sa bordure inférieure le long de "Normal Blvd" qui n'est pas une ligne droite comme vous pouvez le voir en regardant la carte Google.

Existe-t-il un moyen de mettre en évidence une longueur de route particulière dans Google Maps et si oui, quelqu'un pourrait-il expliquer cela ou suggérer une référence?

Merci, Dominic

Answer 1

Le seul api est venu dans mon esprit est Polyline.

Answer 2

Vous pouvez utiliser le DirectionsService pour renvoyer des polylignes qui suivent les routes.

proof of concept fiddle (I need to adjust some of your points to avoid the directions service adding extra turns)

extrait de code:

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&ext=.js"></script> 
 
<div id="map_canvas"></div>