Google स्थल खोज बॉक्स का उपयोग करना। बटन पर क्लिक करके खोज कैसे शुरू करें?

Question

या तो मैं मूर्ख हूं या यह Google मानचित्र टीम के हिस्से पर एक गंभीर निगरानी थी।

मैं एक मानक क्लिक कुंजीपटल ईवेंट (जो वर्तमान में ठीक काम कर रहा है) के संयोजन के साथ एक बटन क्लिक ईवेंट पर एक स्थान खोज अनुरोध ट्रिगर करने का प्रयास कर रहा हूं। मैंने Google Places search box से संबंधित दस्तावेज के माध्यम से काम किया है और मुझे कोई सट्टा समाधान नहीं मिला है।

गोपनीयता कारणों से मैं डेमो से उदाहरण का उपयोग कर रहा हूं।

function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var defaultBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-33.8902, 151.1759), 
    new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    var input = /** @type {HTMLInputElement} */(document.getElementById('target')); 
    var searchBox = new google.maps.places.SearchBox(input); 
    var markers = []; 


    document.getElementById('button').addEventListener('click', function() { 
    var places = searchBox.getPlaces(); 

    // places -> undefined 

    // The assumption is that I could just call getPlaces on searchBox 
    // but get nothing in 'places' 
    // Beyond that it doesn't even make a call to the Google Places API 

    // Currently the only way to perform the search is via pressing enter 
    // which isn't terribly obvious for the user. 

    }, false) 


    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    markers = []; 
    var bounds = new google.maps.LatLngBounds() 

    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 
    } 

Answer 1

यह आपके विचार से कहीं अधिक सरल है। उपर दिए गए प्रारंभिक बिंदु के साथ, https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

initialize() में HTML

<button id="button">click</button> 

करने के लिए एक बटन जोड़ें बहुत अंत करने के लिए इस जोड़ने के लिए, } से पहले:

var button = document.getElementById('button'); 
    button.onclick = function() { 
    input.value='test'; 
    input.focus(); 
    } 

input पहले से ही परिभाषित किया गया है। बटनों की खोज को ट्रिगर करने के लिए आपको बस इतना करना है - वास्तव में - focus खोज बॉक्स से जुड़े इनपुट बॉक्स को। आपको सर्चबॉक्स के साथ मिलना नहीं है या "places_changed" या उस तरह की कुछ भी ट्रिगर नहीं करना है, जिसे आप कहीं और सुझाव के रूप में देख सकते हैं - लेकिन वास्तव में काम नहीं कर रहा है।

मुझे लगता है कि आप "कुछ कारणों से" बटन को ट्रिगर करना चाहते हैं, जैसे कुछ विशिष्ट पूर्वनिर्धारित खोजना - यही कारण है कि मैं परीक्षण के लिए इनपुट मान सेट करके "परीक्षण" के साथ खोज को ट्रिगर करता हूं।

काम कर डेमो के साथ अपडेट किया गया, इसके बाद के संस्करण गूगल उदाहरण के आधार पर ->http://jsfiddle.net/7JTup/

Answer 2

आप इनपुट तत्व पर पहले ट्रिगर focus करने की जरूरत है, तो कोड 13 (कुंजी दर्ज करें) के साथ एक keydown घटना ट्रिगर।

var input = document.getElementById('target'); 

google.maps.event.trigger(input, 'focus') 
google.maps.event.trigger(input, 'keydown', { 
    keyCode: 13 
}); 

JSFiddle demo