Welche Änderung sollte ich in Google Api Javascript machen, so dass es nur die indischen Städte ohne Trailing State und Indien zeigen kann?

-1

Welche Änderung sollte ich in Google Api Javascript machen, so dass es nur die indischen Städte ohne Trailing State und Indien zeigen kann?Welche Änderung sollte ich in Google Api Javascript machen, so dass es nur die indischen Städte ohne Trailing State und Indien zeigen kann?

<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>

Quelle

2016-04-27 Hardik

Der Code sehen gut aus, es funktioniert, wenn Sie versuchen, einen Ortsnamen eingeben. Es gibt Vorschläge. Was genau ist deine Frage? –

Eigentlich möchte ich nur den Namen der Stadt nicht Staat und Land. Zur Zeit zeigt es die ganze Stadt der Welt und ich möchte es auch auf Indien beschränken. Zum Beispiel können wir sagen wie in zomato und quikerhomes – Hardik

Ok. Sie wollen Städte, die spezifisch für Indien sind. –

Verwenden Autocomplete() Vorhersagen zu erhalten und Sie Ihre individuelle droupdown binden können.

<!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>

Quelle

2016-04-27 06:02:31

aber ich will auch textbox – Hardik

eigentlich sir ich habe nie google location api so verwendet – Hardik

Auf textbox keyup ruf die api und buid deine benutzerdefinierte dropdown –

-1

Versuchen, kann diese

helfen

<!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>

Quelle

2016-04-27 10:44:08

Bearbeiten Sie vorherige Antwort lieber als wieder zu beantworten. –

Welche Änderung sollte ich in Google Api Javascript machen, so dass es nur die indischen Städte ohne Trailing State und Indien zeigen kann?

Antwort

Verwandte Themen