私はGoogle Api javascriptでどのような変更を行う必要がありますので、末尾の州とインドのないインドの都市のみを表示できますか？

-1

私はGoogle Api javascriptでどのような変更を行う必要がありますので、末尾の州とインドのないインドの都市のみを表示できますか？私はGoogle Api javascriptでどのような変更を行う必要がありますので、末尾の州とインドのないインドの都市のみを表示できますか？

<html> 
 

 
<head> 
 
    <script> 
 
    var placeSearch, autocomplete; 
 
    var componentForm = { 
 
     street_number: 'short_name', 
 
     route: 'long_name', 
 
     locality: 'long_name', 
 
     administrative_area_level_1: 'short_name', 
 
     country: 'long_name', 
 
     postal_code: 'short_name' 
 
    }; 
 

 
    function initAutocomplete() { 
 
     // Create the autocomplete object, restricting the search to geographical 
 
     // location types. 
 
     //autocomplete = new google.maps.places.Autocomplete(
 
     /** @type {!HTMLInputElement} */ //(document.getElementById('autocomplete')), 
 
     // {types: ['geocode']}); 
 

 
     // When the user selects an address from the dropdown, populate the address 
 
     // fields in the form. 
 
     var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { 
 
     types: ['(cities)'] 
 
     }); 
 

 
     autocomplete.addListener('place_changed', fillInAddress); 
 
    } 
 

 
    function fillInAddress() { 
 
     // Get the place details from the autocomplete object. 
 
     var place = autocomplete.getPlace(); 
 

 
     for (var component in componentForm) { 
 
     document.getElementById(component).value = ''; 
 
     document.getElementById(component).disabled = false; 
 
     } 
 

 
     // Get each component of the address from the place details 
 
     // and fill the corresponding field on the form. 
 
     for (var i = 0; i < place.address_components.length; i++) { 
 
     var addressType = place.address_components[i].types[0]; 
 
     if (componentForm[addressType]) { 
 
      var val = place.address_components[i][componentForm[addressType]]; 
 
      document.getElementById(addressType).value = val; 
 
     } 
 
     } 
 
    } 
 

 
    // Bias the autocomplete object to the user's geographical location, 
 
    // as supplied by the browser's 'navigator.geolocation' object. 
 
    function geolocate() { 
 
     if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
      var geolocation = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude 
 
      }; 
 
      var circle = new google.maps.Circle({ 
 
      center: geolocation, 
 
      radius: position.coords.accuracy 
 
      }); 
 
      autocomplete.setBounds(circle.getBounds()); 
 
     }); 
 
     } 
 
    } 
 
    </script> 
 

 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1YjmCfbQrueEjKUbHAjzOZf1OpeQKqOU&libraries=places&callback=initAutocomplete" async defer></script> 
 
    
 
</head> 
 

 
<body> 
 
    <input id="autocomplete" placeholder="Enter The City " onFocus="geolocate()" name="ct" type="text" required> 
 
</body> 
 

 
</html>

出典

2016-04-27 Hardik

コードを使用すると、都市名を入力しようとすると、それは動作しますが、罰金に見える助けるかもしれない、試してみてください。それは示唆を与えている。あなたの質問は何ですか？ –

実際に私は州名と国名ではなく都市名だけを欲しい。現在、世界のすべての都市を展示しており、インドまで制限したいと思っています。たとえば、zomatoやquikerhomesのように言うことができます。 – Hardik

Ok。あなたはインド特有の都市を望みます。 –

利用AutocompleteService（）の予測を取得すると、あなたのカスタムdroupdownをバインドすることができます。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Retrieving Autocomplete Predictions</title> 
 
    </head> 
 
    <body> 
 
    <div id="right-panel"> 
 
     <p>Query suggestions for city:</p> 
 
     <ul id="results"></ul> 
 
    </div> 
 
    <script> 
 
     function initService() { 
 
     var displaySuggestions = function (predictions, status) { 
 
      if (status != google.maps.places.PlacesServiceStatus.OK) { 
 
      alert(status); 
 
      return; 
 
      } 
 

 
      var a = predictions; 
 

 
      predictions.forEach(function (prediction) { 
 
      var li = document.createElement('li'); 
 
      //li.appendChild(document.createTextNode(prediction.description)); 
 
      li.appendChild(document.createTextNode(prediction.terms[0].value)); 
 
      document.getElementById('results').appendChild(li); 
 
      }); 
 
     }; 
 

 
     var service = new google.maps.places.AutocompleteService(); 
 
     service.getPlacePredictions(
 
       { 
 
        input: "jai", 
 
        types: ['(cities)'], 
 
        componentRestrictions: {country: 'in'} 
 
       }, 
 
     displaySuggestions); 
 
<!-- service.getQueryPredictions({ input: 'j' }, displaySuggestions); --> 
 
     } 
 
    </script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1YjmCfbQrueEjKUbHAjzOZf1OpeQKqOU&libraries=places&callback=initService" 
 
    async defer></script> 
 
    </body> 
 
</html>

出典

2016-04-27 06:02:31

しかし、私もテキストボックスがほしい – Hardik

実際に私はGoogleの場所APIを使用したことがない – Hardik

テキストボックスのキーアップでapiを呼び出し、あなたのカスタムドロップダウンを作成しました –

-1

これは

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Retrieving Autocomplete Predictions</title> 
 
    <style> 
 
     .dropdown ul{ 
 
     position:absolute; 
 
     border:1px solid #ddd; 
 
     display:black; 
 
     margin:0; 
 
     padding:0; 
 
     } 
 

 
     .dropdown li{ 
 
     list-style:none; 
 
     padding:3px 10px; 
 
     cursor: pointer; 
 
     } 
 

 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="right-panel"> 
 
     <p>Query suggestions for city:</p> 
 
     <ul id="results"></ul> 
 
    </div> 
 
     <script> 
 
      function initService() { 
 
      displaySuggestions = function (predictions, status) { 
 
       if (status != google.maps.places.PlacesServiceStatus.OK) { 
 
       alert(status); 
 
      return; 
 
      } 
 

 
      var options = '<ul>'; 
 
      predictions.forEach(function (prediction) {    options += ('<li onclick="clicked(this)">' + prediction.terms[0].value + '</li>'); 
 
      }); 
 
      options += '</ul>'; 
 
      document.getElementById('ddlCity').innerHTML = options; 
 
      document.getElementById('ddlCity').style.display = 'block'; 
 

 
      };  
 
     } 
 

 
    function GetCity(){ 
 
    var keywords = document.getElementById('autocomplete').value; 
 
    if(keywords != ''){ 
 
    var service = new google.maps.places.AutocompleteService(); 
 

 
    service.getPlacePredictions(
 
      { 
 
      input: keywords, 
 
      types: ['(cities)'], 
 
      componentRestrictions: {country: 'in'} 
 
      }, 
 
      displaySuggestions); 
 
     } 
 
     else 
 
     { 
 
     document.getElementById('ddlCity').style.display = 'none'; 
 
     } 
 
    } 
 

 
    function clicked(obj){ 
 
    document.getElementById('autocomplete').value = obj.innerHTML; 
 
    document.getElementById('ddlCity').style.display = 'none'; 
 
    } 
 
    </script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC1YjmCfbQrueEjKUbHAjzOZf1OpeQKqOU&libraries=places&callback=initService" 
 
    async defer></script> 
 
    <input id="autocomplete" placeholder="Enter The City " name="ct" onkeyup="GetCity() 
 
      ;" type="text" required> 
 
    <div id="ddlCity" class="dropdown"> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-04-27 10:44:08

あなたは以前の答えを編集する必要はありません。 –

私はGoogle Api javascriptでどのような変更を行う必要がありますので、末尾の州とインドのないインドの都市のみを表示できますか？

答えて

関連する問題