MITHIL PATEL February 2016

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

I am working on example where i have prepared a google place search box which give me direct output to map by auto complete tool.but i want following to type of more facility for search

  1. if i write something in search box and press enter key from keyboard,search box should work 2.i want button beside search box which give me result after clicking on it if i 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();

            

Answers


abielita February 2016

1.if i write something in search box and press enter key from keyboard,search box should work

You can use google.maps.Geocoder which you places markers on a map or position the map. See this 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 which give me result after clicking on it if i have entered value in search box.

You need to add an Event listener for that event. The code will be executed when those events are received by calling addListener() to register event handlers on the 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);
}

              

Post Status

Asked in February 2016
Viewed 3,051 times
Voted 8
Answered 1 times

Search




Leave an answer