JSFiddle - React, Tailwind, and code Playground

by timhuang

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC72eA0akfjiEpSx-hjeicyys36g51dIB4&amp;libraries=geometry&amp;language=zh-TW"></script>
<input type="button" onclick="initMap();" value="initMap">
    <div id="map"></div>

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }

JavaScript

var map;
      var testArea;
   

      function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
		  // 25.037828, 121.547204
          center: {lat: 25.037828, lng: 121.547204},
          zoom: 16,
        });

        var testAreaCoords = [
			{lat: 25.0416515, lng:121.5437222},
			{lat: 25.0333111, lng:121.543529},
			{lat: 25.033116700000004, lng:121.5526271},
			{lat: 25.036052399999996, lng:121.55267000000002},
			{lat: 25.0374716, lng:121.55146840000002},
			{lat: 25.038016, lng:121.5513396},
			{lat: 25.0415348, lng:121.5474987},
			{lat: 25.0416515, lng:121.5437222}, 
        ];

        testArea = new google.maps.Polygon({
        	paths: testAreaCoords,
		    strokeColor: '#FF0000',
		    strokeOpacity: 0.8,
		    strokeWeight: 3,
		    fillColor: '#FF0000',
		    fillOpacity: 0.05
        	
        });
        testArea.setMap(map);

      }