CODEWITHSUNDEEP
javascriptapigoogle-maps
holli
holli

Reputation: 21

Google Maps JavaScript API - Create Polygon from Polylines Snapped to Road

I am trying to fill an area that is bordered by polylines that are snapped to roads. Here is my code: 

var pos = new google.maps.LatLng(29.744860,-95.361302);

var myOptions = {
zoom: 12,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);

roadTrip1 = [
new google.maps.LatLng(29.692093, -95.377307),
new google.maps.LatLng(29.813047,-95.399361),
new google.maps.LatLng(29.692093, -95.377307)
];

var traceroadTrip1 = new google.maps.Polyline({
path: roadTrip1,
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});

var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
service1.route({origin: roadTrip1[j],destination: roadTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
    if(status == google.maps.DirectionsStatus.OK) {
        snap_path = snap_path.concat(result.routes[0].overview_path);
        traceroadTrip1.setPath(snap_path);
    }
});


}

I'm not too familiar with javascript and I'm hoping it's easy to create a polygon from polylines that are snapped to roads. Once I have a polygon I'd like to color the area.

Thanks for any and all help.

Upvotes: 1

Views: 546

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Change the google.maps.Polyline to a google.maps.Polygon.

var traceroadTrip1 = new google.maps.Polygon({
  path: roadTrip1,
  strokeColor: "red",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

proof of concept fiddle

code snippet:

function initialize() {

  var pos = new google.maps.LatLng(29.813047, -95.399361);

  var myOptions = {
    zoom: 11,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map'), myOptions);

  map.setCenter(pos);

  roadTrip1 = [
    new google.maps.LatLng(29.692093, -95.377307),
    new google.maps.LatLng(29.813047, -95.399361),
    new google.maps.LatLng(29.692093, -95.377307)
  ];

  var traceroadTrip1 = new google.maps.Polygon({
    path: roadTrip1,
    strokeColor: "red",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  var service1 = new google.maps.DirectionsService(),
    traceroadTrip1, snap_path = [];
  var bounds = new google.maps.LatLngBounds();
  traceroadTrip1.setMap(map);
  for (j = 0; j < roadTrip1.length - 1; j++) {
    service1.route({
      origin: roadTrip1[j],
      destination: roadTrip1[j + 1],
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        snap_path = snap_path.concat(result.routes[0].overview_path);
        traceroadTrip1.setPath(snap_path);
        for (var i = 0; i < traceroadTrip1.getPath().getLength(); i++) {
          bounds.extend(traceroadTrip1.getPath().getAt(i));
        }
        map.fitBounds(bounds);
      }
    });


  }

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Upvotes: 1

Related Questions