<style type="text/css">
    #map,
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #panel {
      width: 200px;
      font-family: Arial, sans-serif;
      font-size: 13px;
      float: right;
      margin: 10px;
    }

    #color-palette {
      clear: both;
    }

    .color-button {
      width: 14px;
      height: 14px;
      font-size: 0;
      margin: 2px;
      float: left;
      cursor: pointer;
    }

    #delete-button {
      margin-top: 5px;
    }
  </style>

  <script src="http://maps.google.com/maps/api/js?libraries=drawing"></script>

  <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbf5LFmJzolZcbdS5u3Mkut_y_GqjaVjA&callback=initMap&libraries=drawing&v=weekly"
    defer></script>

  <div id="panel">
    <div id="color-palette"></div>
    <div>
      <button id="delete-button">Delete Selected Shape</button>

      Isi Kode LatLng :
      <button id="clipboard-btn" onclick="copyToClipboard(document.getElementById('info').value)">Copy to
        Clipboard</button>
      <textarea id="info"></textarea>


      Isi Kode Warna :
      <button id="clipboard-btn" onclick="copyToClipboard(document.getElementById('color').value)">Copy to
        Clipboard</button>
      <textarea id="color"></textarea>


       Kode myLatLng = new google.maps.LatLng:
      <button id="clipboard-btn" onclick="copyToClipboard(document.getElementById('infoV2').value)">Copy to
        Clipboard</button>
      <textarea cols="25" id="infoV2"></textarea>
    </div>
  </div>
  <div id="map"></div>
  <script>

    var drawingManager;
    var selectedShape;
    var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
    var selectedColor;
    var colorButtons = {};

    function clearSelection() {
      if (selectedShape) {
        selectedShape.setEditable(false);
        selectedShape = null;
      }
    }

    function setSelection(shape) {
      clearSelection();
      selectedShape = shape;

      // #start update code by yudha
      let tmpArrLatLong = [];
      let arrLatLong = [];
      selectedShape.getPath().getArray().map((item) => tmpArrLatLong.push("" + item));
      for (let i = 0; i < tmpArrLatLong.length; i++) {
        const item = tmpArrLatLong[i];
        const itemV2 = item.replace('(-', '-', item);
        const itemV3 = itemV2.replace(')', '', itemV2);

        const array = itemV3.split(',');
        const finItem = {
          'lat': parseFloat(array[0]),
          'lng': parseFloat(array[1])
        };

        arrLatLong.push(finItem);
      }

      var lat = arrLatLong.map(function(p) {return p.lat});
      var lng = arrLatLong.map(function(p) {return p.lng});

      var min_coords = {
          lat : Math.min.apply(null, lat),
          lng : Math.min.apply(null, lng)
      }
      var max_coords = {
          lat : Math.max.apply(null, lat),
          lng : Math.max.apply(null, lng)
      }

      // x1, the lowest x coordinate
      // y1, the lowest y coordinate
      // x2, the highest x coordinate
      // y2, the highest y coordinate

      const x1 = min_coords.lng; // longitude
      const y1 = min_coords.lat; // latitude

      const x2 = max_coords.lng; // latitude
      const y2 = max_coords.lat; // longitude

      centerX = x1 + ((x2 - x1) / 2);
      centerY = y1 + ((y2 - y1) / 2);
      const centerLatLng = centerY+','+centerX

      document.getElementById("infoV2").value = centerLatLng;
      // #end update code by yudha

      document.getElementById("info").value = selectedShape.getPath().getArray().map((item) => "new google.maps.LatLng" + item);
      shape.setEditable(true);
      selectColor(shape.get('fillColor') || shape.get('strokeColor'));
    }

    function deleteSelectedShape() {
      if (selectedShape) {
        selectedShape.setMap(null);
      }
    }

    function selectColor(color) {
      selectedColor = color;
      document.getElementById("color").value = selectedColor;
      for (var i = 0; i < colors.length; ++i) {
        var currColor = colors[i];
        colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
      }

      // Retrieves the current options from the drawing manager and replaces the
      // stroke or fill color as appropriate.
      var polylineOptions = drawingManager.get('polylineOptions');
      polylineOptions.strokeColor = color;
      drawingManager.set('polylineOptions', polylineOptions);

      var rectangleOptions = drawingManager.get('rectangleOptions');
      rectangleOptions.fillColor = color;
      drawingManager.set('rectangleOptions', rectangleOptions);

      var circleOptions = drawingManager.get('circleOptions');
      circleOptions.fillColor = color;
      drawingManager.set('circleOptions', circleOptions);

      var polygonOptions = drawingManager.get('polygonOptions');
      polygonOptions.fillColor = color;
      drawingManager.set('polygonOptions', polygonOptions);
    }

    function setSelectedShapeColor(color) {
      if (selectedShape) {
        if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
          selectedShape.set('strokeColor', color);
        } else {
          selectedShape.set('fillColor', color);
        }
      }
    }

    function makeColorButton(color) {
      var button = document.createElement('span');
      button.className = 'color-button';
      button.style.backgroundColor = color;
      google.maps.event.addDomListener(button, 'click', function () {
        selectColor(color);
        setSelectedShapeColor(color);
      });

      return button;
    }

    function buildColorPalette() {
      var colorPalette = document.getElementById('color-palette');
      for (var i = 0; i < colors.length; ++i) {
        var currColor = colors[i];
        var colorButton = makeColorButton(currColor);
        colorPalette.appendChild(colorButton);
        colorButtons[currColor] = colorButton;
      }
      selectColor(colors[0]);
    }
    var map;

    var infoWindow;

    function initialize2() {
      var myLatLng = new google.maps.LatLng(-5.494409, 104.623181);
      var mapOptions = {
        zoom: 17,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN

      };
      map = new google.maps.Map(document.getElementById('map'), mapOptions);

      var bermudaTriangle;
      var triangleCoords = [
      ];
      bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      bermudaTriangle.setMap(map);

      var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
      };
      // Creates a drawing manager attached to the map that allows the user to draw
      // markers, lines, and shapes.
      drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        markerOptions: {
          draggable: true
        },
        polylineOptions: {
          editable: true
        },
        rectangleOptions: polyOptions,
        circleOptions: polyOptions,
        polygonOptions: polyOptions,
        map: map
      });

      google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
          // Switch back to non-drawing mode after drawing a shape.
          drawingManager.setDrawingMode(null);

          // Add an event listener that selects the newly-drawn shape when the user
          // mouses down on it.

          var newShape = e.overlay;
          newShape.type = e.type;
          google.maps.event.addListener(newShape, 'click', function () {
            setSelection(newShape);
          });
          setSelection(newShape);
        }
      });

      // Clear the current selection when the drawing mode is changed, or when the
      // map is clicked.
      google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection, getPolygonCoords);
      google.maps.event.addListener(map, 'click', clearSelection, getPolygonCoords);
      google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

      buildColorPalette();
    }
    google.maps.event.addDomListener(window, 'load', initialize2);



    //Display Coordinates below map
    function getPolygonCoords() {
      var len = myPolygon.getPath().getLength();
      var htmlStr = "";
      for (var i = 0; i < len; i++) {
        htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "), ";
        //Use this one instead if you want to get rid of the wrap > new google.maps.LatLng(),
        //htmlStr += "" + myPolygon.getPath().getAt(i).toUrlValue(5);
      }
      document.getElementById('info').innerHTML = htmlStr;
    }

    function copyToClipboard(text) {
      window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
    }
  </script>