<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel='stylesheet' type='text/css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'> <link rel='stylesheet' type='text/css' href='/css/map.css'> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="/js/map.js" type='text/javascript'></script> <script src="/js/typeahead.js" type='text/javascript'></script> <script src="/js/autocomplete.js" type='text/javascript'></script> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> </head> <body> <nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">BeaverMaps</a> </nav> <br> <div class="container container-fluid"> <ul class="nav nav-tabs"> <li class="nav-item"> <a id="search" class="nav-link active" href="#">Search</a> </li> <li class="nav-item"> <a id="directions" class="nav-link" href="#">Route</a> </li> </ul> <br> <div class="input-group"> <input class="form-control" id="place-name" placeholder="Location" autocomplete="off"> <br> <input hidden=true class="form-control" id="end-name" placeholder="Destination" autocomplete="off"> <br> <div class="input-group"> <button class="btn btn-outline-secondary" type="button" id="all">Find All</button> <button class="btn btn-outline-secondary" type="button" id="nearby">Find Places Nearby</button> <button hidden=true class="btn btn-outline-secondary" type="button" id="findpath">Find Route</button> </div> </div> <br> <div id="mapid" class="mapid"></div> </div> </body> </html> <script> $('#place-name').keypress(function (e) { var key = e.which; if(key == 13) // the enter key code { if ($("#findpath").is(":hidden")) { $('#all').click(); } else { $("#findpath").click(); } return false; } }); $('#end-name').keypress(function (e) { var key = e.which; if(key == 13) // the enter key code { $("#findpath").click(); return false; } }); </script>