JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>P.0版-畫多邊形</title>
	<!--【P.0版】主架構參考Simple Polygon https://developers.google.com/maps/documentation/javascript/examples/polygon-simple -->
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 50%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="msg"></div>	
	
    <script>
	function initMap() {
	  var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 16,
		center: {lat: 24.121517, lng: 120.675553},
		mapTypeId: google.maps.MapTypeId.TERRAIN
	  });

	  // Define the LatLng coordinates for the polygon's path. 套用資料來自於【1.1版】的一組座標格式
	  var polyCoords = [{lng: 120.6754891, lat: 24.1236512}, {lng: 120.6754878, lat: 24.1228667}, {lng: 120.675703, lat: 24.1228673}, {lng: 120.675703, lat: 24.1228422}, {lng: 120.6758116, lat: 24.1228416}, {lng: 120.6758116, lat: 24.1228673}, {lng: 120.6759417, lat: 24.1228673}, {lng: 120.6759424, lat: 24.1228403}, {lng: 120.6761865, lat: 24.1228403}, {lng: 120.6761865, lat: 24.1228642}, {lng: 120.6764467, lat: 24.1228654}, {lng: 120.6764453, lat: 24.1230258}, {lng: 120.676499, lat: 24.1230258}, {lng: 120.6765016, lat: 24.1234982}, {lng: 120.6764534, lat: 24.1234982}, {lng: 120.6764534, lat: 24.1236463}, {lng: 120.6761905, lat: 24.1236488}, {lng: 120.6761905, lat: 24.1236708}, {lng: 120.6759397, lat: 24.1236733}, {lng: 120.6759384, lat: 24.1236476}, {lng: 120.6758089, lat: 24.1236488}, {lng: 120.6758096, lat: 24.1236738}, {lng: 120.6756956, lat: 24.1236745}, {lng: 120.6756956, lat: 24.1236512}, {lng: 120.6754891, lat: 24.1236512}];

	  // Construct the polygon.
	  var building = new google.maps.Polygon({
		paths: polyCoords,
		strokeColor: '#FF0000',
		strokeOpacity: 0.8,
		strokeWeight: 2,
		fillColor: '#FF0000',
		fillOpacity: 0.35
	  });
	  building.setMap(map);
	  
	  //...