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

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?

Answer 1

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>