Google Maps polygon with hole not working when coordinates changed

Question

I initiated my Google Maps using jQuery, and using the latest version of Google Maps. Trying to implement in WordPress with jQuery version 1.12.4 (as WP core's using this). I's following the Google Maps' Polygon with Hole. But whenever I changed the coordinates to mine, it seems not working at all. The innerCoords are not intersecting, but overlapping the outerCoords.

I first thought it could be a matter of land and water, so I moved my coords from land to water, but the problem persists. I thought my coords are lengthy, so I minimized 'em .123 (3 digits after dot), but the problem persists.

Here's a Fiddle for the whole code:
https://jsfiddle.net/mayeenulislam/c884wy06/

The code in question is as follows:

var map_container = $('#map');

if (map_container.length > 0) {
  var latitude = 23.900460,
      longitude = 90.341313;
 /*
 // Uttara Center (Land)
 var latitude = 23.875029,
     longitude = 90.381631; */

 /*
 // Bermuda Center (Water)
 var latitude = 24.886,
     longitude = -70.268; */

  function initialize(lat, lng) {
    var locationLatLng = {
        lat: lat,
        lng: lng
      },
      mapCanvas = document.getElementById('map'),
      mapOptions = {
        center: locationLatLng,
        zoom: 15, //ideal 12
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.LEFT_BOTTOM
        },
        //scrollwheel: false,
        streetViewControl: false,
      };

    map = new google.maps.Map(mapCanvas, mapOptions);

    // Define the LatLng coordinates for the polygon's  outer path.
    var outerCoords = [
      {lat: 23.900, lng: 90.337},
      {lat: 23.905, lng: 90.343},
      {lat: 23.898, lng: 90.342}

      /*
      // Uttara, Dhaka Coordinates (Land)
      {lat: 23.875007, lng: 90.370270},
      {lat: 23.880893, lng: 90.383404},
      {lat: 23.875634, lng: 90.380571}*/

      /*
      // Bermuda Triangle (Water)
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}*/
    ];

    // Define the LatLng coordinates for the polygon's inner path.
    // Note that the points forming the inner path are wound in the
    // opposite direction to those in the outer path, to form the hole.
    var innerCoords = [
      {lat: 23.899, lng: 90.341},
      {lat: 23.900, lng: 90.342},
      {lat: 23.898, lng: 90.342}

      /*
      // Uttara, Dhaka Coordinates (Land)
      {lat: 23.877067, lng: 90.377367},
      {lat: 23.878000, lng: 90.378438},
      {lat: 23.876833, lng: 90.378591}*/

      /*
        // Bermuda Triangle (Water)
        {lat: 28.745, lng: -70.579},
        {lat: 29.570, lng: -67.514},
        {lat: 27.339, lng: -66.668}*/
    ];

    // Construct the polygon, including both paths.
    var coverage = new google.maps.Polygon({
      paths: [outerCoords, innerCoords],
      strokeColor: '#FFC107',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FFC107',
      fillOpacity: 0.35
    });

    coverage.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize(latitude, longitude));
}

I commented out the two other coordinates - the actual Bermuda Triangle, and one of my coords of land - so that you can test the code. I thought it could be the zoom level that matters, but I inspected with the Bermuda Triangle one - it's working on any zoom level.

What am I doing wrong?

Answer 1

Recently answered a post about that, It's all about the order of your coordinates:

SO Post on coordinates order

Answer 2

I simply changed the order of the inner coordinates and it worked. Change your innerCoords with the following:

     var innerCoords = [ {
       lat: 23.900156,
       lng: 90.342533
     },{
       lat: 23.899989,
       lng: 90.341664
     }, {
       lat: 23.898037,
       lng: 90.342983
     }