JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=places"></script>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="info"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 2px;
    color:"black";
}

JavaScript

function initialize() {
      var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
      mapOptions);
      var bounds = new google.maps.LatLngBounds();
      var i;

      var polygonCoords = [
      new google.maps.LatLng(14.156734403334724, 121.26814396414763),
      new google.maps.LatLng(14.156956159186617, 121.2682025135474),
      new google.maps.LatLng(14.15716533202476, 121.2673054424065),
      new google.maps.LatLng(14.156951585745787, 121.26724861901177),
      new google.maps.LatLng(14.156734403334724, 121.26814396414763)];
      var poly = new google.maps.Polygon({
          paths: polygonCoords,
          map: map
      });
      for (i = 0; i < polygonCoords.length; i++) {
          bounds.extend(polygonCoords[i]);
      }
      map.fitBounds(bounds);
      document.getElementById('info').innerHTML = "latitude:" + bounds.getCenter().lat() + " longitude:" + bounds.getCenter().lng();
      console.log(bounds.getCenter());
      var marker = new google.maps.Marker({
          position: bounds.getCenter(),
          map: map
      });
  }
  google.maps.event.addDomListener(window, 'load', initialize);