title: Google Maps API polygon trim
body: <p>I want to trim multiple polygons on each other, it works but not as expected.Here is my code written in JAVA</p>
  
  <pre><code>    String coords = "|5,5|5,20|20,20|20,5|5,5";
  
      String coords2 = "|8,10|12,10|12,17|8,17|8,10";
  
      String coords3 = "|16,12|18,12|18,15|16,15|16,12";
  
      String aaa = "http://maps.googleapis.com/maps/api/staticmap?maptype=roadmap" +
              "&amp;center=10,10"+
              "&amp;zoom=4"+
              "&amp;size=600x600" +
              "&amp;sensor=false" +
              "&amp;path=weight:0|fillcolor%3ablue" + coords + coords2 + coords3 +
              "";
      URL url = new URL(aaa);
      BufferedImage read = ImageIO.read(url);
      displayQRCode(read);
  </code></pre>
  
  <p>And the result is something like this: <a href="http://i.stack.imgur.com/cKfxK.png" rel="nofollow">Google map</a></p>
  
  <p>But i want to get something like this: <a href="http://i.stack.imgur.com/olRqh.png" rel="nofollow">Right Google map</a></p>
  
  <pre><code>function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(10, 10),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
  
      var coords = [
          new google.maps.LatLng(5,5),
          new google.maps.LatLng(5, 20),
          new google.maps.LatLng(20, 20),
          new google.maps.LatLng(20, 5),
          new google.maps.LatLng(5, 5)
      ];
  
      var coords2 = [
          new google.maps.LatLng(8, 10),
          new google.maps.LatLng(12,10),
          new google.maps.LatLng(12, 17),
          new google.maps.LatLng(8, 17),
          new google.maps.LatLng(8, 10)
      ];          
  
      var coords3 = [
          new google.maps.LatLng(16, 12),
          new google.maps.LatLng(18, 12),
          new google.maps.LatLng(18, 15),
          new google.maps.LatLng(16, 15),
          new google.maps.LatLng(16, 12)
      ];
      var polygon = new google.maps.Polygon({
          paths: [coords, coords2, coords3],
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 1,
          fillColor: '#00FF00',
          fillOpacity: 0.35
      });
      alert(coords);
      polygon.setMap(map);
    }
  </code></pre>
  
  <p>api drawer cuts the shape when it draws,</p>