1

cut an area from a polygon

I found this example here.

var map;
function initialize() {
  map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var triangleCoords1 = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];
  var triangleCoords2 = [
    new google.maps.LatLng(29, -69),
    new google.maps.LatLng(25, -70),
    new google.maps.LatLng(23, -72),
    new google.maps.LatLng(29, -69)

  ];
  for (var i = 0; i < triangleCoords1.length; i++) {
    bounds.extend(triangleCoords1[i]);
  }
  for (var i = 0; i < triangleCoords2.length; i++) {
    bounds.extend(triangleCoords2[i]);
  }
  map.fitBounds(bounds);

  bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords1, triangleCoords2],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
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" style="border: 2px solid #3872ac;"></div>

But if I change that to my needs, it will not work. enter image description here

var map;
function initialize() {
  map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var triangleCoords1 = [
     new google.maps.LatLng(51.7339654, 6.4478929),
     new google.maps.LatLng(51.4992925, 6.4666535),
     new google.maps.LatLng(51.5837765, 6.1284897),
     new google.maps.LatLng(51.7339654, 6.4478929)
  ];
  var triangleCoords2 = [
     new google.maps.LatLng(51.6374564, 6.2919939),
     new google.maps.LatLng(51.6474904, 6.3974619),
     new google.maps.LatLng(51.5722125, 6.3693991),
     new google.maps.LatLng(51.6374564, 6.2919939)
 ];
 for (var i = 0; i < triangleCoords1.length; i++) {
    bounds.extend(triangleCoords1[i]);
  }
  for (var i = 0; i < triangleCoords2.length; i++) {
    bounds.extend(triangleCoords2[i]);
  }
  map.fitBounds(bounds);

  bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords1, triangleCoords2],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
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" style="border: 2px solid #3872ac;"></div>

What am I doing wrong?

1

Thank you "Mapperz" for the hint, that was exactly the solution.

// Note that the points forming the inner path are wound in the
// opposite direction to those in the outer path, to form the hole.

The solution is:

triangleCoords2 = triangleCoords2.reverse();

enter image description here

The whole javascript:

var map;
function initialize() {
  map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var triangleCoords1 = [
     new google.maps.LatLng(51.7339654, 6.4478929),
     new google.maps.LatLng(51.4992925, 6.4666535),
     new google.maps.LatLng(51.5837765, 6.1284897),
     new google.maps.LatLng(51.7339654, 6.4478929)
  ];
  var triangleCoords2 = [
     new google.maps.LatLng(51.6374564, 6.2919939),
     new google.maps.LatLng(51.6474904, 6.3974619),
     new google.maps.LatLng(51.5722125, 6.3693991),
     new google.maps.LatLng(51.6374564, 6.2919939)
 ];
 triangleCoords2 = triangleCoords2.reverse();
 for (var i = 0; i < triangleCoords1.length; i++) {
    bounds.extend(triangleCoords1[i]);
  }
  for (var i = 0; i < triangleCoords2.length; i++) {
    bounds.extend(triangleCoords2[i]);
  }
  map.fitBounds(bounds);

  bermudaTriangle = new google.maps.Polygon({
    paths: [triangleCoords1, triangleCoords2],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);

Not the answer you're looking for? Browse other questions tagged or ask your own question.