在谷歌地图API v3 javascript上绘制多个多边形

Question

I have several coordinate data saved on my database. The data looked like this:

[
    [-8.411328650721382, 115.2549934387207],
    [-8.423385320191324, 115.26924133300781],
    [-8.428988996455418, 115.27507781982422],
    [-8.445120338164106, 115.2682113647461],
    [-8.452082077411186, 115.2656364440918],
    [-8.46430726648532, 115.26580810546875],
    [-8.470419715493609, 115.26615142822266],
    [-8.476022708444539, 115.26477813720703],
    [-8.481116267546547, 115.25671005249023],
    [-8.492491639030948, 115.24469375610352],
    [-8.481795403659492, 115.2414321899414],
    [-8.472287388879758, 115.24641036987305],
    [-8.462609346758175, 115.24606704711914],
    [-8.455308206642881, 115.24417877197266],
    [-8.445629737978635, 115.23714065551758],
    [-8.434252981999162, 115.2352523803711],
    [-8.422026840993878, 115.23490905761719],
    [-8.410479575344654, 115.23954391479492],
    [-8.405385084022475, 115.24383544921875]
]

I have to draw several polygon on map but when I do, all the polygons are connected each other.

Here is my javascript:

<script>

var map;
var i = 0;
var poly = {};
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -1.55038056899795, lng: 118.6962890625},
    zoom: 5,
    disableDefaultUI: true
  });
  var jsonPeta = <?=$peta?>;
  var coordArray = [];
  var path = [];

  for(i=0;i<jsonPeta.length;i++){
    //console.log(i);
    coordArray = JSON.parse(jsonPeta[i].peta);
    coordArray.forEach(function(entry){
      path.push(new google.maps.LatLng(entry[0],entry[1]));
    });
    poly[i] = new google.maps.Polygon({
    paths: path,
    editable: false,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#03a9f4',
      clickable: true,
      fillOpacity: 0.35
  });
  poly[i].setMap(map);
  console.log(poly[i]);
  }

  var input = document.getElementById('pac-input');

  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);

  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

if (places.length == 0) {
  return;
}

// Clear out the old markers.
markers.forEach(function(marker) {
  marker.setMap(null);
});
markers = [];

// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
  var icon = {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  };

  // Create a marker for each place.
  markers.push(new google.maps.Marker({
    map: map,
    icon: icon,
    title: place.name,
    position: place.geometry.location
    //document.getElementById("lat").value = place.geometry.Latitude
  }));
  document.getElementById('lat').value = place.geometry.location.lat();
  document.getElementById('lon').value = place.geometry.location.lng();
  if (place.geometry.viewport) {
    // Only geocodes have viewport.
    bounds.union(place.geometry.viewport);
  } else {
    bounds.extend(place.geometry.location);
  }
});
map.fitBounds(bounds);


});
}
</script>