Google Maps API v.3 convert polyline into polygon with given width

Question

I'm looking for the way for converting polyline (created from i.e. 2 coordinates) to polygon containing at least 4 coordinates. Simple usage case is airway on the aviation map, it has start at point A, end at point B and width of x nautical miles. Dummy code is:

var someLine = new google.maps.Polyline({
    path: [
        {lat: 51.15, lng: 15},
        {lat: 51.15, lng: 18}
    ],
    geodesic: true,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 5
});
someLine.setMap(map);

// how to convert above someLine into?:
var airway = new google.maps.Polygon({
    paths: [
        {lat: 51, lng: 15},
        {lat: 51, lng: 18},
        {lat: 51.3, lng: 18},
        {lat: 51.3, lng: 15}
    ],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    geodesic: true
});
airway.setMap(map);

Which looks like:

where black line is common polyline and red polygon is desired effect.

Is that any API/plugin available for such task or I need to calculate the corners of polygon(s) manually?

You must calculate manually .. google maps don't have a "buffer" function — ScaisEdge, Apr 22 '16 at 17:17
But you need an area for some reason or simply you need a wide line? — ScaisEdge, Apr 22 '16 at 17:24
As showed on the picture: I have a black line and given width of x nautical miles, I need to convert it to red polygon that covers the polyline's path + this width — biesior, Apr 22 '16 at 17:41
Just in the official docs the airways are described as line from A to B with width of x miles, and I need to show it on the map — biesior, Apr 22 '16 at 17:43
Well how i have tell you in the first comment google maps don't a GIS buffer function so you must callcute with a proper function the right coords all around the world for draw a path wide like the miles you need .. (and remenber that google maps is a mercator projection ..) — ScaisEdge, Apr 22 '16 at 17:59
possible duplicate of [How to draw a polygon around a polyline in JavaScript?](http://stackoverflow.com/questions/19369363/how-to-draw-a-polygon-around-a-polyline-in-javascript) — geocodezip, Apr 22 '16 at 18:27

score 2 · Answer 1 · answered Apr 22 '16 at 18:50

One option would be to use the Google Maps Javascript API v3 geometry library to compute your polygon based on the width of the air lane and the center line. If you specify the width of the air lane using meters (rather than nautical miles, which is just a conversion):

var lineWidth = 10000; // (meters)
var lineHeading = google.maps.geometry.spherical.computeHeading(someLine.getPath().getAt(0), someLine.getPath().getAt(1));
var p0a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading+90);
var p0b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading-90);
var p1a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading+90);
var p1b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading-90);

var airway = new google.maps.Polygon({
  paths: [p0a, p0b, p1b, p1a],
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 3,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  geodesic: true
});

code snippet:

var geocoder;
var map;

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 someLine = new google.maps.Polyline({
    path: [{
      lat: 51.15,
      lng: 15
    }, {
      lat: 49.15,
      lng: 18
    }],
    geodesic: true,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  someLine.setMap(map);
  var lineWidth = 10000; // (meters)
  var lineHeading = google.maps.geometry.spherical.computeHeading(someLine.getPath().getAt(0), someLine.getPath().getAt(1));
  var p0a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading + 90);
  var p0b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading - 90);
  var p1a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading + 90);
  var p1b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading - 90);


  // how to convert above someLine into?:
  var airway = new google.maps.Polygon({
    paths: [p0a, p0b, p1b, p1a],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    geodesic: true
  });
  airway.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < airway.getPath().getLength(); i++) {
    bounds.extend(airway.getPath().getAt(i));
  }
  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"></script>
<div id="map_canvas"></div>

Google Maps API v.3 convert polyline into polygon with given width

1 Answers1