title: Polygon of world map with a hole (google maps)
body: <p>I am trying to draw a rectangle polygon with a hole. My problem is that I cannot create a polygon that covers the whole world. The polygon is inverted so that only a single line is selected instead of the whole world. </p>
  
  <p>Below an example of the maximum selection I am able to make. For example if I try to alter 0 (in the line new google.maps.LatLng(-85.1054596961173,<strong>0</strong>)) to any other value the inverted selection is used. </p>
  
  <p>Maybe I am missing something obvious here, but I can't seem to get it working.</p>
  
  <pre><code>function initialize() {
    var mapOptions = {
      zoom: 1,
      center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
  
  
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  
    var worldCoords = [
      new google.maps.LatLng(-85.1054596961173, -180),
      new google.maps.LatLng(85.1054596961173, 180),
      new google.maps.LatLng(85.1054596961173, 180),
     new google.maps.LatLng(-85.1054596961173,0)
  
    ];
  
    var EuropeCoords = [
                new google.maps.LatLng(29.68224948021748, -23.676965750000022),
                new google.maps.LatLng(29.68224948021748, 44.87772174999998),
                new google.maps.LatLng(71.82725578445813, 44.87772174999998),
                new google.maps.LatLng(71.82725578445813, -23.676965750000022)
      ];
  
  
    // Construct the polygon.
    poly = new google.maps.Polygon({
      paths: [worldCoords,EuropeCoords],
      strokeColor: '#000000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#000000',
      fillOpacity: 0.35
    });
  
  
    poly.setMap(map);
  }
  </code></pre>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/xs9fcdf9/4/" rel="nofollow">http://jsfiddle.net/xs9fcdf9/4/</a></p>