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?

closed as unclear what you're asking by Jochen Schwarze, whyzar, csk, BBG_GIS, xunilk Mar 23 at 21:53

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

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.