javascript - google map search box result by clicking on enter key or by clicking on button -

i working on example have prepared google place search box give me direct output map auto complete tool.but want following type of more facility search

1. if write in search box , press enter key keyboard,search box should work 2.i want button beside search box give me result after clicking on if have entered value in search box. example : fiddle

   $(function () {           var lat = 44.88623409320778,               lng = -87.86480712897173,               latlng = new google.maps.latlng(lat, lng);             //zoomcontrol: true,           //zoomcontroloptions: google.maps.zoomcontrolstyle.large,             var mapoptions = {               center: new google.maps.latlng(lat, lng),               zoom: 13,               maptypeid: google.maps.maptypeid.roadmap,               pancontrol: true,               pancontroloptions: {                   position: google.maps.controlposition.top_right               },               zoomcontrol: true,               zoomcontroloptions: {                   style: google.maps.zoomcontrolstyle.large,                   position: google.maps.controlposition.top_left               }           },           map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions),               marker = new google.maps.marker({                   draggable: true,                   position: latlng,                   map: map,               });             var input = document.getelementbyid('searchtextfield');           var autocomplete = new google.maps.places.autocomplete(input, {               types: ["geocode"]           });             autocomplete.bindto('bounds', map);           var infowindow = new google.maps.infowindow();             google.maps.event.addlistener(autocomplete, 'place_changed', function (event) {               infowindow.close();               var place = autocomplete.getplace();               if (place.geometry.viewport) {                   map.fitbounds(place.geometry.viewport);               } else {                   map.setcenter(place.geometry.location);                   map.setzoom(17);               }                 movemarker(place.name, place.geometry.location);               $('.maplat').val(place.geometry.location.lat());               $('.maplon').val(place.geometry.location.lng());           });           google.maps.event.addlistener(marker, 'dragend', function (event) {               $('.maplat').val(event.latlng.lat());               $('.maplon').val(event.latlng.lng());              document.getelementbyid("lat").value = event.latlng.lat();              document.getelementbyid("long").value = event.latlng.lng();               infowindow.close();                       var geocoder = new google.maps.geocoder();                       geocoder.geocode({                           "latlng":event.latlng                       }, function (results, status) {                           console.log(results, status);                           if (status == google.maps.geocoderstatus.ok) {                               console.log(results);                               var lat = results[0].geometry.location.lat(),                                   lng = results[0].geometry.location.lng(),                                   placename = results[0].address_components[0].long_name,                                   latlng = new google.maps.latlng(lat, lng);                                 movemarker(placename, latlng);                               $("#searchtextfield").val(results[0].formatted_address);                           }                       });           });                     function movemarker(placename, latlng) {               marker.setposition(latlng);               infowindow.setcontent(placename);               //infowindow.open(map, marker);           }       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script>    address:  <input id="searchtextfield" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">  <br>              latitude:<input name="latitude" class="maplat" value="" type="text" placeholder="latitude" style="width: 161px;" disabled>              longitude:<input name="longitude" class="maplon" value="" type="text" placeholder="longitude" style="width: 161px;" disabled>        <div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>

1.if write in search box , press enter key keyboard,search box should work

you can use google.maps.geocoder places markers on map or position map. see example.

function selectfirstresult() {     infowindow.close();     var firstresult = $(".pac-container .pac-item:first").text();      var geocoder = new google.maps.geocoder();     geocoder.geocode({"address":firstresult }, function(results, status) {         if (status == google.maps.geocoderstatus.ok) {             var lat = results[0].geometry.location.lat(),                 lng = results[0].geometry.location.lng(),                 placename = results[0].address_components[0].long_name,                 latlng = new google.maps.latlng(lat, lng);              movemarker(placename, latlng);             $("input").val(firstresult);         }     });     } 

2.i want button beside search box give me result after clicking on if have entered value in search box.

you need add event listener event. code executed when events received calling addlistener() register event handlers on object. example:

function initialize() {   map = new google.maps.map(document.getelementbyid('map'), options);   searchbox = new google.maps.places.searchbox(document.getelementbyid('searchbox'));   google.maps.event.addlistener(searchbox, 'places_changed', processplacessearch); }  var button = document.getelementbyid('searchbutton'); var searchbox = document.getelementbyid('searchbox');  button.onclick = function () {   var location = searchbox.value;   processbuttonsearch(location); } 

hope helps!