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>1.1版-監聽移點</title>
	<!--【1.0版】主架構參考Complex icons https://developers.google.com/maps/documentation/javascript/examples/icon-complex -->
 	<!--【1.1版】加上Dragend listener http://stackoverflow.com/questions/12828044/?answertab=votes#tab-top -->
   <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #show_map {
        height: 50%;
      }
    </style>
  </head>
  
  <body>
    <div id="show_map"></div>
	
	<div>
      <table>
        <tbody>
          <tr>
            <td>大門口</td>
            <td id="marker0"></td>
          </tr>
          <tr>
            <td>停車場</td>
            <td id="marker1"></td>
          </tr>
          <tr>
            <td>目的地</td>
            <td id="marker2"></td>
          </tr>
        </tbody>
      </table>
	</div>
	  
    <script>
		function initMap() {
		  var mapObject = new google.maps.Map(document.getElementById('show_map'), {
			zoom: 17,
			center: {lat: 24.121517, lng: 120.675553}
		  });
		  setMarkers(mapObject);
		}

		// Data for the locations(大門口、停車場、目的地) consisting of a icon filename and a LatLng.
		var Locations = [
		  ['大門口', 24.123718, 120.675020],
		  ['停車場', 24.121448, 120.676701],
		  ['目的地', 24.121331, 120.677141]
		];

		function setMarkers(mapObject) {
		  var icon = ['https://goo.gl/AbAMiB', 'https://goo.gl/NziqIX', 'https://goo.gl/WuwBuk'];
		  // Adds markers to the mapObject.
		  for (var i = 0; i < Locations.length; i++) {
			var thisone = Locations[i];
			var marker = new google.maps.Marker({
			  position: {lat: thisone[1], lng: thisone[2]},
			  map: mapObject,
			  icon:{
					url: icon[i],
					size: new google.maps.Size(32, 32),
					origin: new google.maps.Point(0, 0),
					anchor: new google.maps.Point(15, 15)
				   },
			  draggable: true  
			  // 建立可拖曳的標記...