Merge polygons using Google Maps API

Question

As you can see below, I have two polygons with sides. Basically 2 triangles with their respective coordinates. See:

function initialize() {
  // Define the LatLng coordinates for the polygon's path.
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
     new google.maps.LatLng(25.774252, -80.190262),
     new google.maps.LatLng(18.466465, -66.118292),
     new google.maps.LatLng(32.321384, -64.757370)
  ];
  

  for (i = 0; i < polygonCoords.length; i++) {
     bounds.extend(polygonCoords[i]);
  }

  var map = new google.maps.Map(document.getElementById("map_canvas2"), {
    zoom: 4,
    center: bounds.getCenter(),
    mapTypeId: "roadmap"
  });


  var triangle1 = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangle1.setMap(map);
  
  var polygonCoords2 = [
     new google.maps.LatLng(25.774252, -80.190262),
     new google.maps.LatLng(18.466465, -66.118292),
     new google.maps.LatLng(14.979063, -83.500871)
  ];

  var triangule2 = new google.maps.Polygon({
    paths: polygonCoords2,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangule2.setMap(map);
  
}

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="initialize()">
  <div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>

I would like to merge the two triangles so that the risk does not appear in the middle between the two, thus making a polygon with 4 sides or 4 coordinates. What would be the best way to do this?

is it expected that the coordinates that are to be merged into one (i.e. points on Puerto Rico and Florida) are always the same coordinate just part of a different polyline? Hope that made sense — , Jul 21 '17 at 14:45

score 0 · Answer 1 · answered Jul 21 '17 at 21:41

Perhaps you could merge the arrays and remove the duplicates? Something like:

var newPolygon = polygonCoords.concat(polygonCoords2);

And then remove the duplicate coordinates (I took this code from this post):

var sorted_arr = newPolygon.slice().sort(); // You can define the comparing function here. 
                                     // JS by default uses a crappy string compare.
                                     // (we use slice to clone the array so the
                                     // original array won't be modified)
var results = [];
for (var i = 0; i < newPolygon.length - 1; i++) {
    if (sorted_arr[i + 1] == sorted_arr[i]) {
        results.push(sorted_arr[i]);
    }
}

Then replace paths: polygonCoords, with paths: results,

Merge polygons using Google Maps API

1 Answers1