JSFiddle - React, Tailwind, and code Playground

by Noel Calonia

HTML

<body>
  <div class="form-group">
    <select class="form-control" id="place">
      <option value="">~Please select a place~</option>
      <option value="Atis">Atis</option>
      <option value="Avocado">Avocado</option>
      <option value="Bayabas">Bayabas</option>
    </select>
  </div>
  <br/>
  <br/>
  <div id="map"></div>
  <br/>
  <input type="text" class="form-control" id="latlong" />
  <script src="https://maps.googleapis.com/maps/api/js">


  </script>
</body>

CSS

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

#map {
  height: 70%;
  width: 100%;
}

JavaScript

var myCenter = new google.maps.LatLng(7.282397, 125.683499);
var marker;

function initialize() {
  var mapProp = {
    center: myCenter,
    zoom: 15,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById("map"), mapProp);
  marker = new google.maps.Marker({
    position: myCenter,
    draggable: true
  });
  marker.setMap(map);

  $("#map").on("click", function() {
    google.maps.event.trigger(map, 'resize');
  });
  google.maps.event.addListener(marker, "drag", function() {
    document.getElementById("latlong").value = marker.getPosition().toUrlValue();
  });

  var barangayBoundaryCoordinates = [{
    lat: 7.292363,
    lng: 125.667018
  }, {
    lat: 7.291958,
    lng: 125.671030
  }, {
    lat: 7.292022,
    lng: 125.673777
  }, {
    lat: 7.291532,
    lng: 125.675864
  }, {
    lat: 7.292884,
    lng: 125.676464
  }, {
    lat: 7.292809,
    lng: 125.677291
  }, {
    lat: 7.292682,
    lng: 125.680069
  }, {
    lat: 7.292283,
    lng: 125.682475
  }, {
    lat: 7.291916,
    lng: 125.684653
  }, {
    lat: 7.290319,
    lng: 125.685536
  }, {
    lat: 7.290787,
    lng: 125.688089
  }, {
    lat: 7.292937,
    lng: 125.689033
  }, {
    lat: 7.294427,
    lng: 125.689951
  }, {
    lat: 7.296428,
    lng: 125.691737
  }, {
    lat: 7.295853,
    lng: 125.692123
  }, {
    lat: 7.295300,
    lng: 125.692273
  }, {
    lat: 7.293703,
    lng: 125.694247
  }, {
    lat: 7.294001,
    lng: 125.694612
  }, {
    lat: 7.294172,
    lng: 125.697123
  }, {
    lat: 7.291000,
    lng: 125.698678
  }, {
    lat: 7.289723,
    lng: 125.697091
  }, {
    lat: 7.287808,
    lng: 125.695717
  }, {
    lat: 7.285573,
    lng: 125.691866
  }, {
    lat: 7.284466,
    lng: 125.690793
  }, {
    lat: 7.282657,
    lng: 125.689763
  }, {
    lat: 7.279996,
    lng: 125.688411
  }, {
    lat: 7.278123,
    lng: 125.686930
  }, {
    lat: 7.277208,
    lng: 125.686287
  }, {
    lat:...