google maps - I want to create a Donut with Javascript API V3(Empty space inside like a hole) -

I want to make a hole in my Javascript Google APP V3, so I'm starting Google Map API V3 . But the code is presenting the whole area. Here's my javascript code.

  (function () {window.onload = function () {// a map var option = {zoom: 6, center: create new google.maps.LatLng} (36.5, -79.8 ), Type the map: create an array with digits for google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map (document.getElementById ('map'), option); External polygon var PolyOutter = [new google.maps.LatLng (37.303, -81.256), new google.maps.LatLng (37.303, -78.333), new google.maps.LatLng (35.392, -78.333), new google.maps LatLng (35.392, -81.256); // Internal polygon var polynner = [Creating an array with new google.maps.LatLng (36.705, -80.459), new google.maps.LatLng (36.705, -79), new google .maps.LatLn G (35.9, -79), new google.maps.LatLng (35.9, -80.459)] var points ts = [polyouter, polyiner]; // polygon var polygon = new google.maps.Polygon ({path: points, Map: Map, Stroke Color: '# FF 20000', Stroke Opacity: 0.6, StrokeWeight: 3, Filling Color: '# FF 20000', Fillopity: 0.35});};}) ();  

One of the paths is to be withdrawn, so draw the polygon in different directions Examples:

  var polyInner = [new google.maps.LatLng (35.9, -80.459), new google.maps.LatLng (35.9, -79), new google.maps.LatLng (36.705, -79), new google.maps.LatLng (36.705, -80.459)];  

I believe the reason for this is how SVG or canvas present closed loop. If I do not have an incorrect explanation, then there is Nozeroo Curved Rule .

The outer path is drawn clockwise, the inner path is drawn in the direction of per-clock.

Set a counter on zero Choose a point in the object area and draw a line in the direction outside the object space. If line cross is added to the clock direction, add line cross-wound-wide path segment, decrease one if the end result of the selected point is zero, then the browser fills the area. If the end result is zero, then the browser does not fill it.

Therefore, if you raise the point in 'hole', the result will be zero and the area will not be filled.