JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script>
var geocoder;
var map;
  function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
      center: new google.maps.LatLng(40.685646, -76.195499),
      zoom: 10
    };
    map = new google.maps.Map(mapCanvas, mapOptions);
    geocoder = new google.maps.Geocoder();
  }
function geocodeAddress(address) {

        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            if (results[0].geometry.viewport) { 
            map.fitBounds(results[0].geometry.viewport);
            } else {
            map.fitBounds(results[0].geometry.bounds);
            } 
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
</script>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
<div>
  <h2>Please Choose a City</h2>
</div>
<form>
  <fieldset>
    <label>
      Cities
    </label>
    <select id="myCity" name="myCity" onchange="geocodeAddress(this.value);">
      <option value="None">Select a City</option>
      <option value="Philadelphia, PA">Philadelphia, PA</option>
      <option value="New York, NY">New York, NY</option>
      <option value="Hartford, CT">Hartford, CT</option>
    </select>
  </fieldset>
</form>

CSS

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

#map {
  height: 70%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}