JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<input type="button" value="America" onclick="centerMap(USbounds);" />
<div class="bh-sl-container">
  <div id="page-header">
    <h1 class="bh-sl-title">The Auditor Locator</h1>

  </div>

  <div class="bh-sl-form-container">
   
      <div class="form-input">
        <label for="bh-sl-address">Enter Address or Zip Code:</label>
        <input id="address" type="text" value="Paramus, NJ" />
        <input type="button" id="id_of_button" value="Submit" onclick="codeAddress();" />
      </div>
    
  </div>

  <table border="0" style="height:100%">
    <tr style="height:100%">
      <td style="height:100%">
        <div id="map"></div>
      </td>
      <td>
        <div id="side_bar" class='text'></div>
        <div id="panel" class='text'></div>
      </td>
    </tr>
  </table>


  <div id="info"></div>
  <div id="mdiv">
    <div class="mdiv">
      <div class="md">
      </div>
    </div>
  </div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

CSS

html,
 body,
 #map {
   margin: 0;
   padding: 0;
   height: 600px;
   width: 400px;
 }
 
 .text {
   width: 300px;
   height: 600px;
   background-color: white;
   overflow: scroll;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 #side_bar {
   z-index: 100;
   position: absolute;
   top: 135px;
   left: 400px;
 }
 
 #panel {
   z-index: -100;
   display: block;
   position: absolute;
   top: 135px;
   left: 400px;
 }
 
 #mdiv {
   z-index: 500;
   width: 25px;
   height: 25px;
   display: none;
   background-color: red;
   border: 1px solid black;
   position: absolute;
   left: 660px;
   top: 112px;
 }
 
 .mdiv {
   height: 25px;
   width: 2px;
   margin-left: 12px;
   background-color: black;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   /* IE 9 */
   -webkit-transform: rotate(45deg);
   /* Safari and Chrome */
   z-index: 1;
 }
 
 .md {
   height: 25px;
   width: 2px;
   background-color: black;
   transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   /* IE 9 */
   -webkit-transform: rotate(90deg);
   /* Safari and Chrome */
   z-index: 2;
 }
 
 tr:nth-child(even) {
   background: #CCC
 }
 
 tr:nth-child(odd) {
   background: #FFF
 }
 .numberCircle {			
  /* float: left; */			
  border-radius: 50%;			
  behavior: url(PIE.htc);		
  /* remove if you don't care about IE8 */
  width: 18px;				
  height: 18px;				
  padding: 4px;				
  margin: 0px;				
  background: #fff;			
  border: 2px solid #666;		
  color: #666;				
  text-align: center;			
  font: 16px Arial, sans-serif;		
}

JavaScript

$("#address").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

var locations = [
  ["John Doe", "145 Rock Ridge Road, Chester, NY ", "41.314926,-74.270134", "http://maps.google.com/mapfiles/ms/icons/blue.png"],
  ["Jim Smith", "12 Williams Rd, Montvale, NJ ", "41.041599,-74.019554", "http://maps.google.com/mapfiles/ms/icons/green.png"],
  ["John Jones", "689 Fern St Township of Washington, NJ ", "40.997704,-74.050598", "http://maps.google.com/mapfiles/ms/icons/yellow.png"],


];
// alert(locations.length);

var geocoder = null;
var map = null;
var customerMarker = null;
var gmarkers = [];
var closest = [];
var directionsDisplay = new google.maps.DirectionsRenderer();;
var directionsService = new google.maps.DirectionsService();


var northEastLat = 37.468404;
  var northEastLng = -122.095122;
  var southWestLat = 37.415386;
  var southWestLng = -122.188678;



var USbounds = {
      "south": -74.270134,
      "west": -74.019554,
      "north": 41.314926,
      "east": 40.997704
    };
var EuropeBounds = {
      "south": 34.5428,
      "west": -31.464799900000003,
      "north": 82.1673907,
      "east": 74.35550009999997
    };
function centerMap(bounds) {

   var bounds = new google.maps.LatLngBounds(
    /* sw */
    {
      lat: southWestLat,
      lng: southWestLng
    },
    /* ne */
    {
      lat: northEastLat,
      lng: northEastLng
    }); 
   map.fitBounds(bounds);
	 map.setZoom(9);
}
var map;

function initialize() {
  // alert("init");
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: new google.maps.LatLng(52.6699927, -0.7274620),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var input = document.getElementById('address');

  var options = {
    types: ['address'],
    // componentRestrictions: {
    //   country: 'us'
    // }
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);
 ...