Google 자동 완성 결과를 도시 및 국가로만 제한하는 방법

198

Google 검색 자동 완성 장소 자바 스크립트를 사용하여 검색 상자에 제안 된 결과를 반환합니다. 필요한 것은 입력 한 문자와 관련된 도시와 국가 만 표시하는 것이지만 Google API는 필요하지 않은 일반적인 장소 결과를 많이 제공합니다. 결과는 도시와 국가 만 표시하도록 제한합니다.

다음 예제를 사용하고 있습니다.

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

javascript autocomplete google-maps-api-3

— 존타
소스

372

당신은 국가 제한을 시도 할 수 있습니다

function initialize() {

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

더 많은 정보:

ISO 3166-1 alpha-2 를 사용하여 결과를 특정 그룹으로 제한 할 수 있습니다. 현재 componentRestrictions를 사용하여 국가별로 필터링 할 수 있습니다.

국가는 ISO 3166-1 Alpha-2 호환 국가 코드의 두 문자로 전달되어야합니다.

공식적으로 할당 된 국가 코드

— 프랑소와
소스

지도를로드하지 않은 경우 자동 완성 쿼리에 사용 제한이 있는지 알고 있습니까? 지도를로드하면 25,000 개의 사용 제한이 있음을 알고 있습니다

— Mithil

4

2014 년 8 월입니다. 이미 국가와 도시 만 표시 할 수 있습니까? 예를 들어 Mil을 입력하면 결과는 이탈리아 Bergamo의 Milan입니다. 이탈리아 밀라노 만 있으면됩니다. 모든 국가를 하나씩 추가하는 것은 옵션이 아닙니다.

— erdomester

2

여러 국가를 지정할 수 있습니까?

— bart

2

@ bart는 분명히 불가능합니다. 해당 기능을 원하면 이 이슈에 별표를 표시 하십시오 .

— dlsso

1

[ '(도시)'] 유형을 사용하면 여기에서 우편 번호로 검색 할 수 없습니다.

— Mohneesh Agrawal

23

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var options = {
        types: ['geocode'] //this should work !
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

스 니펫 확장

var options = {
  types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

다른 유형에 대한 참조 : http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

— 언 로코
소스

1

구글에서 바로이 코드를 확인하십시오. 그들은 필터링 예제 code.google.com/apis/maps/documentation/javascript/…

— UnLoCo

자동 완성 객체는 두 개의 변수를 허용하지 않으며 하나의 변수 만 허용되며 'geocode'입니다. 이 문제를 해결하는 방법을 모르겠습니다. Google 문서에는 많은 유형이 있지만 접수 할 수는 없습니다.

— JohnTaa

동일한 매개 변수가 작동 AutocompleteService합니까?

— Steven Aguilar

12

이 시도

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&region=in" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

스 니펫 확장

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places "type ="text / javascript "

"region = in"(in = india)로 변경하십시오.

" http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in"type = "text / javascript"

— 라빈 드라
소스

우리는 도시 목록, 주 목록, 지역 목록 등이 필요합니다

— Shadab K

이것이 정답입니다. OP가 요구하는 결과를 달성하는 가장 간단하고 빠른 방법입니다. 그리고 그것은 나를 위해 일했습니다.

— user2056633

9

답 국가에서 모든 도시를 목록에서 프랑수아 결과에 의해 주어진다. 그러나 국가의 모든 지역 (도시 + 주 + 기타 지역 등)을 나열해야하는 경우 유형을 변경하여 그에 따라 결과를 필터링 할 수 있습니다.

해당 국가의 도시 만 나열

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

국가의 모든 도시, 주 및 지역 목록

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };

식당, 상점 및 사무실과 같은 모든 시설 목록

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };

자세한 정보 및 옵션은

https://developers.google.com/maps/documentation/javascript/places-autocomplete

이것이 누군가에게 유용 할 수 있기를 바랍니다.

— 키란 무랄리
소스

9

기본적으로 허용되는 답변과 동일하지만 새로운 유형 및 여러 국가 제한으로 업데이트되었습니다.

function initialize() {

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: ["us", "de"]}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

사용 '(regions)'대신은 '(cities)'으로 잘 도시 이름으로 우편 번호로 검색 할 수 있습니다.

공식 문서, 표 3 참조 : https://developers.google.com/places/supported_types

— 세 바카 28
소스

8

Google 자동 완성 API를 약간 사용해 보았으며 결과를 국가로만 제한하는 가장 좋은 해결책은 다음과 같습니다.

var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components

for(var i = 0; i < result.address_components.length; i += 1) {
  var addressObj = result.address_components[i];
  for(var j = 0; j < addressObj.types.length; j += 1) {
    if (addressObj.types[j] === 'country') {
      console.log(addressObj.types[j]); // confirm that this is 'country'
      console.log(addressObj.long_name); // confirm that this is the country name
    }
  }
}

반환 된 결과 객체를 보면 주소의 다른 부분을 나타내는 여러 객체를 포함하는 address_components 배열이 있음을 알 수 있습니다. 이러한 각 개체에는 'types'배열이 포함되며이 'types'배열 내에는 국가 별 주소를 포함하여 주소와 관련된 다른 레이블이 표시됩니다.

— mock
소스

미국의 특정 주로 만 제한하거나 특정 주를 제외시키는 방법이 있습니까?

— Martin Erlic

@ santafebound (호주의 특정 주에 대해) 똑같은 일을하려고합니다. 문서에서 대답은 '아직 아직 없음'인 것처럼 보이지만 response객체 를 가로 채서 데이터의 다른 키로 제한 하는 방법을 찾고 싶습니다 .

— GT.

4

또한 국가 제한으로 인해지도를 확대 / 축소하고 가운데에 배치해야합니다!

줌 및 가운데 매개 변수 만 사용하십시오! ;)

function initialize() {
  var myOptions = {
    zoom: countries['us'].zoom,
    center: countries['us'].center,
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  };

  ... all other code ...

}

— 키르 마주 르
소스

4

나 자신을위한 해결책을 찾았다

var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];

acService.getPlacePredictions({
    types: ['(regions)']
}, function(predictions) {
    predictions.forEach(function(prediction) {
        if (prediction.types.some(function(x) {
                return x === "country" || x === "administrative_area1" || x === "locality";
            })) {
            if (prediction.terms.length < 3) {
                autocompleteItems.push(prediction);
            }
        }
    });
});

이 솔루션은 도시와 국가 만 표시합니다.

— nk 크 야 무르
소스

자동 완성 기능이 포함 된 전체 코드 목록을 제공 할 수 있습니까

— Volodymyr Khmil

2

<html>
  <head>
    <title>Example Using Google Complete API</title>   
  </head>
  <body>

<form>
   <input id="geocomplete" type="text" placeholder="Type an address/location"/>
    </form>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
  <script>
   $(function(){        
    $("#geocomplete").geocomplete();                           
   });
  </script>
 </body>
</html>

자세한 내용은 이 링크를 방문 하십시오

— 히나 바자
소스