projects/maps-locations/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Google Places API</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="prefetch" href="https://fonts.googleapis.com/css?family=Dosis" as="font">
    <link rel="stylesheet" href="src/stylesheet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script>    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAytr024G7F4gULgAW1eMTtExZjaFwJuzE&libraries=places" async></script>
    <script type="text/javascript" src="src/app.js" async></script>
  </head>
  <body>
    <div class="search-container">
      <header>
        <h1>Hey there! <br> What would you like to search for today?</h1>
      </header>
      <input id="search-query" type="text" name="search-query" placeholder="restaurants, pizza, McDonald's..." autofocus><br>
      <input class="search-button main-button" type="submit" value="Search">
    </div>

    <aside class="sidenav">
      <a href="javascript:void(0)" id="close-nav">&times;</a>
      <div class="sidenav-container">
        <input id="sidenav-query" type="text" placeholder=""><br>
        <input class="search-button sidenav-button" type="submit" value="Search">
      </div>
      <ul class="results-list"></ul>
    </aside>

    <main id="map"></main>
  </body>
</html>