Результат поиска в google map, нажав на клавишу ввода или нажав кнопку

Question

Я работаю над примером, где я подготовил окно поиска google, которое дает мне прямой вывод для сопоставления с помощью auto complete tool.but, я хочу, чтобы после ввода больший объект для поиска

1. если я пишу что-то в поле поиска и нажмите клавишу ввода с клавиатуры, окно поиска должен работать 2.I кнопки рядом с окном поиска, которые хотят дать мне результат после нажатия на него, если я поступил значение в поле поиска. Пример: 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>

Answer 1

1.Если я написать что-нибудь в поле поиска и нажмите клавишу ввода с клавиатуры, окно поиска должен работать

Вы можете использовать Google. карты. Geocoder, на который вы размещаете маркеры на карте или размещаете карту. См. Это 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.Я хочу кнопку рядом с окном поиска, которые дают мне результат после нажатия на него, если я введенное значение в поле поиска.

Для этого необходимо добавить Event listener. Код будет выполнен, когда эти события будут получены путем вызова addListener() для регистрации обработчиков событий на объекте. Пример:

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); 
} 

Надеюсь, это поможет!