Untitled

<html>

<head>
  <title>US Cities Database</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="index.css" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<script>

  function doWhenReady () {
    $('a').click(showMap);
  };

  function showMap(event) {
    var element = $(event.currentTarget);
    var lat = element.attr('lat');
    var long = element.attr('long');
    var url = "https://maps.google.com/maps?q="+lat+","+long+"&h1=es&z=12&t=m&output=embed";
    $('iframe').attr('src', url);
  }

  $(document).ready(doWhenReady);

</script>

<body class="container">

  <h4>US Cities Zip Code and Latitude / Longitude Locator</h4>
  <p><strong>Make sure to enter the smaller Zip Code in the first box, and the larger Zip Code in the second box.</strong></p>
  <form action="index.php" method="POST" class="form-inline">
    <div class="form-group">
      <label for="city">City</label>
      <input type="text" class="form-control" name="city" />
    </div>
    <div class="form-group">
      <label for="state">State</label>
      <input type="text" class="form-control" name="state" />
    </div>
    <div class="form-group">
      <label for="zipFrom">Zipcode from:</label>
      <input type="text" class="form-control" name="zipFrom" />
    </div>
    <div class="form-group">
      <label for="zipTo">to:</label>
      <input type="text" class="form-control" name="zipTo" />
    </div>
    <button type="submit" class="btn btn-default btn-primary">Search</button>

  </form>
  <hr>

  <div class="row">
    <div class="col-md-5 scrollable">
      <div class="search-results">
        <h4>Search results:</h4>

<?php

  $host = 'localhost';
  $username = 'caleyhalpern';
  $password = '';
  $dbName = 'project224';

  $db = mysqli_connect ($host, $username, $password, $dbName);
  if (!$db) {
    die("Failed to connect to MySQL: (" . mysqli_connect_errno() . ") " . $mysqli->connect_error);
  }

  $searchCity = $_POST['city'];
  $searchState = $_POST['state'];
  $searchZipCode = $_POST['zipcode'];
if ((isset($searchCity) || isset($searchState)) && (($searchCity != '') || ($searchState != '')))
  $query = 'SELECT * FROM zips WHERE city LIKE "%'.$searchCity.'%" AND state LIKE "%'.$searchState.'%"';
    $results = mysqli_query($db, $query);
    $resultArray = mysqli_fetch_all($results, MYSQLI_ASSOC);
?>

        <table class="table table-striped table-condensed small">
          <thead>
            <tr>
              <th>Show</th>
              <th>Zip</th>
              <th>State</th>
              <th>City</th>
              <th>Lat</th>
              <th>Long</th>
            </tr>
          </thead>

          <tbody>
<?php
    foreach($resultArray as $city) {
      echo "<tr>";
      echo '<td><a href="#" lat="'.$city['lat'].'" long="'.$city['lng'].'">Show</a></td>';
      echo "<td>".$city['zip']."</td>";
      echo "<td>".$city['state']."</td>";
      echo "<td>".$city['city']."</td>";
      echo "<td>".$city['lat']."</td>";
      echo "<td>".$city['lng']."</td>";
      echo "</tr>";
    }
?>
          </tbody>
        </table>
<?php
  }
?>
      </div>
    </div>
    <div class="col-md-7">
      <div class="map">
        <h4>Map:</h4>

        <iframe src=""></iframe>
      </div>
    </div>
  </div>

</body>

</html>