JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

CSS

html, body {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      input {
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
      }

      h3 {
        margin: 0 0 5px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      p {
        margin: 0 0 10px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .photo-marker {
        display: block;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border: 2px solid #eee;
        box-shadow: rgba(255, 255, 255, 0.4) 0 2px 4px;
        -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 2px 4px;
        -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 2px 4px;
        cursor: pointer;
        position: absolute;
        z-index: 0;
      }

      .photo-marker:hover {
        z-index: 1;
      }

      img.close {
        cursor: pointer;
        width: 38px;
        height: 38px;
        float: right;
        margin-left: 10px;
      }

      #map-canvas {
        height: 100%;
      }

      #target {
        width: 345px;
        outline: none;
        border: 1px solid #fff;
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -181px;
        width: 350px;
        z-index: 1000;
        background-color: #fff;
        padding: 5px;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        box-shadow: rgba(255, 255, 255, 0.4) 0 2px 4px;
        -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 2px 4px;
        -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 2px 4px;
      }

      /* Modal Window styles */
      #modal {
        display: none;
      }

      #mask {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
       ...

JavaScript

var markers = [];
  
      function initialize() {
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          maxZoom: 16,
          styles: [
            {
              elementType: 'labels',
              stylers: [ { visibility: 'on' } ]
            },
            {
              stylers: [ { saturation: -100 }, { lightness: -20 } ]
            }
          ]
        });

        var defaultBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(-33.8902, 151.1759),
            new google.maps.LatLng(-33.8474, 151.2631));
        map.fitBounds(defaultBounds);

        var input = document.getElementById('target');
        var searchBox = new google.maps.places.SearchBox(input);
        searchBox.setBounds(map.getBounds());

        var modalWindow = new ModalWindow(map);
        

        google.maps.event.addListener(searchBox, 'places_changed', function() {
          
          var places = searchBox.getPlaces();
          if (!places.length) {
            return;
          }

          for (var i = 0, marker; marker = markers[i]; i++) {
            marker.setMap(null);
          }
          markers = [];

          var bounds = new google.maps.LatLngBounds();
          
          $("#side_bar").empty();
          for (var i = 0, place; place = places[i]; i++) {
            if (place.photos) {
              markers.push(new PhotoMarker(place, map, modalWindow));
              setLink(i);              
            bounds.extend(place.geometry.location);
            } else {
              markers.push(new google.maps.Marker({
                position: place.geometry.location,
                map: map,
                icon: new google.maps.MarkerImage(
                    'https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png',
                    null, null, new google.maps.Point(3.5,3.5)),
                clickable: false
              }));
         ...