Google Maps JavaScript API v3

지역정보 라이브러리

1. 개요
2. 라이브러리 로드
3. 지역정보 검색
   1. 지역정보 검색 요청
   2. 텍스트 검색 요청
   3. 검색 응답
   4. 추가 결과에 액세스하기
4. 지역정보 세부정보
   1. 지역정보 세부정보 요청
   2. 지역정보 세부정보 응답
5. 지역정보 자동 완성
   1. 자동 완성 추가
   2. 지역정보 가져오기
   3. 자리 표시자 텍스트 변경하기

개요

Google 지역정보 자바스크립트 라이브러리의 기능을 사용하면 애플리케이션이 지도의 경계 또는 고정된 지점 주변 등에 정의된 영역(이 API에 시설, 지리적 위치 또는 주요 관심장소로 정의)에서 지역정보를 검색할 수 있습니다.

라이브러리 로드

지역정보 서비스는 기본 Maps API 자바스크립트 코드와는 별도로 독립적인 라이브러리 내에 포함되어 있습니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 libraries 매개변수를 사용하여 Maps API 부트스트랩 URL에서 기능을 로드해야 합니다.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true_or_false"></script>

자세한 내용은 라이브러리 개요를 참조하세요.

지역정보 검색

지역정보 서비스를 사용하면 다음과 같은 세 가지 검색 방법을 수행할 수 있습니다.

• 지역정보 검색은 사용자 위치를 기준으로 근처 지역 정보의 목록을 반환합니다.
• 텍스트 검색은 검색 문자열을 기준으로 근처 지역 정보의 목록을 반환합니다. 예: '피자'
• 지역정보 세부정보 요청은 사용자 리뷰를 포함한 특정 장소에 대한 더 자세한 정보를 반환합니다.

반환된 정보는 식당, 상점 및 사무실 등의 시설을 비롯하여 주소를 나타내는 '지오코드' 결과, 시, 군 등의 정치 지역, 기타 관심장소를 포함할 수 있습니다.

지역정보 검색 요청

지역정보 라이브러리는 지정된 영역에서 장소를 찾도록 search() 메소드를 제공합니다. 이 메소드는 위치 기준을 충족하는 장소의 배열(LatLngBounds 또는 LatLng 객체)을 반환하여 중심 지점 및 검색할 지점 주변의 반경 값을 나타냅니다.

지역정보 검색은 PlacesService의 search() 메소드를 호출하여 시작됩니다.

service = new google.maps.places.PlacesService(map);
service.search(request, callback);

이 메소드는 다음 필드가 포함된 요청을 받습니다.

• 다음 중 하나:
  • bounds - 검색할 직사각형을 정의하는 google.maps.LatLngBounds 객체여야 합니다. 또는
  • location 및 radius - 전자는 google.maps.LatLng 객체를 받으며 radius는 간단한 정수를 받아 원의 반경(미터 단위)을 나타냅니다. 허용되는 최대 반경은 50,000미터입니다.
• keyword(선택사항) - 고객 검토 및 다른 제3자 콘텐츠뿐만 아니라 이름, 유형 및 주소를 포함하되 이에 국한되지 않는 모든 사용 가능한 모든 필드에 대해 비교될 용어입니다.
• name(선택사항) - 장소의 이름과 비교될 용어입니다. 결과는 전달된 이름 값을 포함하는 용어로 제한됩니다. 장소에는 나열된 이름 외에도 추가 이름이 연결되어 있을 수 있습니다. API는 전달된 name 값을 이러한 모든 이름에 대해 일치시키려고 시도합니다. 그에 따라 나열된 이름은 검색어와 일치하지 않지만 그와 연결된 이름이 일치하는 장소가 결과에 반환될 수 있습니다.
• rankBy(선택사항) - 나열된 결과의 순서를 지정합니다. 가능한 값은 다음과 같습니다.
  • google.maps.places.RankBy.PROMINENCE(기본값). 이 옵션은 중요도를 기준으로 결과를 정렬합니다. 등급은 크게 눈에 띄지는 않지만 일치하는 근처 장소의 설정 반경 내에 있는 눈에 띄는 지역을 보여줍니다. 중요도는 Google의 색인의 장소 등급, 애플리케이션에서 체크인 횟수, 글로벌 인지도 및 기타 요소의 영향을 받을 수 있습니다. google.maps.places.RankBy.PROMINENCE를 지정하는 경우 radius 매개변수가 필요합니다.
  • google.maps.places.RankBy.DISTANCE. 이 옵션은 지정된 location(필수)으로부터의 거리를 기준으로 결과를 오름차순으로 정렬합니다. 거리 기준 등급 결과는 50Km의 고정된 검색 반경을 설정합니다. 맞춤 반경 및 경계는 RankBy.DISTANCE와 함께 지정할 수 없습니다. distance를 지정하는 경우 하나 이상의 keyword, name 또는 types이 필요합니다.
• types(선택사항) - Google Places API: 지원되는 장소 유형 목록에 등록된 하나 이상의 지원되는 유형을 포함하는 배열입니다. 이 서비스는 지정된 유형과 일치하는 결과를 반환합니다.

또한 search()에 콜백 메소드를 전달하여 결과 객체와 google.maps.places.PlacesServiceStatus 응답을 처리해야 합니다.

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.search(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

예제 보기(place-search.html)

텍스트 검색 요청

Google 지역정보 텍스트 검색 서비스는 문자열(예: '뉴욕의 피자 가게' 또는 '오타와 근처의 신발 가게')을 기준으로 지역 정보 집합에 대한 정보를 반환하는 웹 서비스입니다. 이 서비스는 문자열 및 설정되어 있는 위치 바이어스와 일치하는 장소 목록에 응답합니다. 검색 응답에는 장소 목록이 포함되고 응답에 포함된 장소에 대한 자세한 내용을 보기 위해 지역정보 세부정보 요청을 보낼 수 있습니다.

텍스트 검색은 PlacesService의 textSearch() 메소드를 호출하여 시작됩니다.

service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);

이 메소드는 다음 필드가 포함된 요청을 받습니다.

• query(필수) - 검색할 텍스트 문자열입니다(예: 음식점'). 지역정보 서비스는 이 문자열을 기준으로 일치 후보를 반환하고 인지된 관련성을 기준으로 검색결과를 정렬합니다.
• 다음 중 하나:###
  • bounds - 검색할 직사각형을 정의하는 google.maps.LatLngBounds 객체여야 합니다. 또는
  • location 및 radius - 전자는 google.maps.LatLng 객체를 받으며 radius는 간단한 정수를 받아 원의 반경(미터 단위)을 나타냅니다. 허용되는 최대 반경은 50,000미터입니다.

location 및 radius 매개변수를 전달하여 지정된 원으로 결과를 바이어스할 수 있습니다. 그러면 지역정보 서비스에 원 내에서 결과를 표시하는 것을 선호하도록 지시합니다. 정의된 영역을 벗어난 결과를 계속 표시할 수 있습니다.

또한 textSearch()에 콜백 메소드를 전달하여 결과 객체와 google.maps.places.PlacesServiceStatus 응답을 처리해야 합니다.

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    query: 'restaurant'
  };

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

검색 응답

상태 코드

PlacesServiceStatus 응답 객체에는 요청의 상태가 포함되어 있으며, 사용자가 장소 검색 요청의 실패 이유를 쉽게 추적하도록 도움을 주는 디버깅 정보가 포함될 수도 있습니다. 가능한 상태 값은 다음과 같습니다.

• ERROR: Google 서버에 접속하는 동안 문제가 발생했습니다.
• INVALID_REQUEST: 이 요청은 유효하지 않습니다.
• OK: 응답에 유효한 결과가 포함되어 있습니다.
• OVER_QUERY_LIMIT: 웹페이지가 요청 할당량을 초과했습니다.
• REQUEST_DENIED: 웹페이지에서 PlacesService를 사용할 수 없습니다.
• UNKNOWN_ERROR: 서버 오류로 인해 PlacesService 요청을 처리하지 못했습니다. 다시 시도하면 요청이 성공할 수도 있습니다.
• ZERO_RESULTS: 이 요청에 대한 결과를 찾지 못했습니다.

장소 검색결과

search() 및 textSearch() 기능은 PlaceResult 객체의 배열을 반환합니다. 각 PlaceResult 객체에는 다음 속성이 있습니다.

• geometry: 장소의 기하학 관련 정보입니다. 이 정보에는 다음이 포함됩니다.
  • location은 장소의 위도와 경도를 제공합니다.
  • viewport는 이 장소를 표시할 때 지도의 선호 뷰포트를 정의합니다.
• icon: 이 장소의 유형을 표시하는 데 사용될 수 있는 이미지 리소스에 대한 URL입니다.
• id: 이 장소를 표시하는 고유 식별자를 포함합니다. 이 식별자는 이 장소에 대한 정보를 검색하는 데 사용될 수 없지만 장소에 대한 데이터를 통합하고 별도의 검색을 통해 장소의 ID를 확인하는 데 사용될 수 있습니다. ID는 가끔 변경될 수 있으므로 장소에 대해 저장된 ID는 같은 장소에 대한 이후의 세부정보 요청에서 반환된 ID와 비교하여 필요한 경우 업데이트하는 것이 좋습니다.
• name: 장소의 이름입니다.
• opening_hours에는 다음 정보가 포함될 수 있습니다.
  • open_now는 장소가 현재 영업 중인지를 나타내는 부울 값입니다.
• rating에는 장소의 평점이 있습니다(사용자 검토 기준 0.0~ 5.0). 보다 자세한 평점을 보려면 aspects[] 배열의 내용을 확인하세요.
• reference는 향후 세부정보 서비스를 쿼리하는 데 사용될 수 있는 토큰을 포함합니다. 이 토큰은 세부정보 서비스에 대한 요청에 사용된 참조와 다를 수 있습니다. 지역정보에 저장된 참조 자료는 정기적으로 업데이트하는 것이 좋습니다. 이 토큰이 고유하게 장소를 식별하지만 역으로 생각하면 그렇지 않습니다. 즉, 한 장소에는 여러 개의 유효한 참조 토큰이 있을 수 있습니다.
• types: 이 장소에 대한 유형의 배열입니다(예: ["political", "locality"] 또는 ["restaurant", "establishment"]).
• vicinity: 거리 이름, 번지, 지역을 포함하여 장소의 단순화된 주소를 나열하지만 시/도, 우편번호 또는 국가는 나열되지 않습니다. 예를 들어 Google의 오스트레일리아 시드니 사무실에는 5/48 Pirrama Road, Pyrmont의 vicinity 값이 있습니다.
• formatted_address는 이 장소에 대해 읽을 수 있는 주소가 포함된 문자열입니다. 이 주소는 주로 '우편 주소'와 일치합니다. formatted_address 속성은 텍스트 검색에 대해서만 반환됩니다.

추가 결과에 액세스하기

기본적으로 장소 검색은 각 검색어 당 최대 20개의 establishment 결과를 반환합니다. 그러나 각 검색 시 3페이지에 나눠 60개의 결과를 반환할 수 있습니다. 추가 페이지는 PlaceSearchPagination 객체를 통해 사용할 수 있습니다. 추가 페이지에 액세스하려면 콜백 함수를 통해 PlaceSearchPagination 객체를 캡처해야 합니다. PlaceSearchPagination 객체는 다음과 같이 정의됩니다.

• hasNextPage는 추가 결과를 사용할 수 있는지를 나타나는 부울 속성입니다. true는 추가 결과 페이지가 있는 경우를 나타냅니다.
• nextPage()는 결과의 다음 집합을 반환하는 함수입니다. 검색을 실행한 후에 다음 페이지 결과를 확인하려면 2초 동안 기다려야 합니다.

다음 결과 집합을 보려면 nextPage를 호출합니다. 각 결과 페이지는 다음 결과 페이지를 표시하기 전에 표시되어야 합니다. 각 검색은 사용 제한에 대한 단일 요청으로 계산됩니다.

아래 예제에서는 여러 검색 요청을 발행할 수 있도록 PlaceSearchPagination객체를 캡처하는 콜백 함수를 변경하는 방법에 대해 설명합니다.

var map;
var service;
var resultList;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '5000',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);

  service.nearbySearch(request, function(status, results, pagination) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
     return;
    }
    resultList.addPlaces(results);
    if (pagination.hasNextPage) {
      resultList.button.onClick = pagination.nextPage;
    }
  });
}

지역정보 세부정보

지역정보 서비스는 영역 내의 장소 목록을 제공할 뿐 아니라 특정 장소에 대한 자세한 정보를 반환할 수 있습니다. 장소 검색 응답으로 장소가 반환되면 reference 속성을 사용하여 전체 주소, 전화번호 사용자 평점 및 리뷰 등을 비롯한 장소에 대한 추가 세부정보를 요청할 수 있습니다.

지역정보 세부정보 요청

장소 세부정보는 서비스의 getDetails() 메소드에 대한 호출을 통해 요청됩니다.

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

이 메소드는 원하는 장소의 reference 값이 포함된 요청을 받습니다.

또한 google.maps.places.PlacesServiceStatus 응답에 전달된 상태 코드를 비롯하여 google.maps.places.PlaceResult 객체를 처리해야 하는 콜백 메소드를 받습니다.

var request = {
  reference: 'CnRkAAAAGnBVNFDeQoOQHzgdOpOqJNV7K9-c5IQrWFUYD9TNhUmz5-aHhfqyKH0zmAcUlkqVCrpaKcV8ZjGQKzB6GXxtzUYcP-muHafGsmW-1CwjTPBCmK43AZpAwW0FRtQDQADj3H2bzwwHVIXlQAiccm7r4xIQmjt_Oqm2FejWpBxLWs3L_RoUbharABi5FMnKnzmRL2TGju6UA4k'
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

예제 보기(place-details.html)

지역정보 세부정보 응답

상태 코드

PlacesServiceStatus 응답 객체에는 요청의 상태가 포함되어 있으며, 장소 세부정보 요청의 실패 이유를 사용자가 쉽게 추적하도록 도움을 주는 디버깅 정보가 포함될 수도 있습니다. 가능한 상태 값은 다음과 같습니다.

• ERROR: Google 서버에 접속하는 동안 문제가 발생했습니다.
• INVALID_REQUEST: 이 요청은 유효하지 않습니다.
• OK: 응답에 유효한 결과가 포함되어 있습니다.
• OVER_QUERY_LIMIT: 웹페이지가 요청 할당량을 초과했습니다.
• NOT_FOUND 참조된 위치가 지역정보 데이터베이스에 없습니다.
• REQUEST_DENIED: 웹페이지에서 PlacesService를 사용할 수 없습니다.
• UNKNOWN_ERROR: 서버 오류로 인해 PlacesService 요청을 처리하지 못했습니다. 다시 시도하면 요청이 성공할 수도 있습니다.
• ZERO_RESULTS: 이 요청에 대한 결과를 찾지 못했습니다.

지역정보 세부정보 결과

getDetails() 호출이 성공하면 다음 속성이 있는 PlaceResult 객체를 반환합니다.

• address_components: 이 장소의 위치에 대한 주소 구성요소의 모음입니다. 자세한 내용은 지오코딩 서비스의 주소 구성요소 유형 섹션을 참조하세요.
• formatted_address: 장소의 전체 주소입니다.
• formatted_phone_number: 전화번호에 대한 지역 규칙에 따라 형식이 지정된 장소의 전화번호입니다.
• geometry: 장소의 기하학 관련 정보입니다. 이 정보에는 다음이 포함됩니다.
  • location은 장소의 위도와 경도를 제공합니다.
  • viewport는 이 장소를 표시할 때 지도의 선호 뷰포트를 정의합니다.
• html_attributions: 이 장소 결과에 표시될 저작자표시 텍스트입니다.
• icon: 이 장소의 유형을 표시하는 데 사용될 수 있는 이미지 리소스에 대한 URL입니다.
• id: 이 장소를 표시하는 고유 식별자를 포함합니다. 이 식별자는 이 장소에 대한 정보를 검색하는 데 사용될 수 없지만 장소에 대한 데이터를 통합하고 별도의 검색을 통해 장소의 ID를 확인하는 데 사용될 수 있습니다. ID는 가끔 변경될 수 있으므로 장소에 대해 저장된 ID는 같은 장소에 대한 이후의 세부정보 요청에서 반환된 ID와 비교하여 필요한 경우 업데이트하는 것이 좋습니다.
• international_phone_number에는 장소의 전화번호가 국가별 형식으로 제공됩니다. 국가별 형식에는 국가 코드가 포함되며 더하기(+) 기호가 앞에 붙습니다. 예를 들어 Google의 오스트레일리아 시드니 사무실의 international_phone_number는 +61 2 9374 4000입니다.
• name: 장소의 이름입니다.
• utc_offset에는 이 장소의 현재 시간대가 UTC와 차이가 나는 시간(분)이 포함됩니다. 예를 들어 일광 절약 시간이 적용되는 기간에 오스트레일리아 시드니에 있는 장소의 경우 이 값은 660분입니다(UTC보다 11시간 빠름). 일광 절약 시간이 적용되지 않는 캘리포니아에 있는 장소의 경우 이 값은 -480입니다(UTC보다 8시간 느림).
• opening_hours에는 다음 정보가 포함될 수 있습니다.
  • open_now는 장소가 현재 영업 중인지를 나타내는 부울 값입니다.
  • periods[]는 일요일부터 시작하여 내림차순으로 7일에 걸친 영업 기간의 배열입니다. 각 기간에는 다음이 포합될 수 있습니다.
    • open - 장소가 언제 영업 중인지를 설명하는 날짜와 시간 객체의 쌍이 포함됩니다.
      • day - 일요일에 시작하는 한 주의 요일에 해당하는 0~6의 숫자입니다. 예를 들어 2는 화요일을 의미합니다.
      • time - 하루의 시간이 24시간 hhmm 형식으로 포함될 수 있습니다(값의 범위는 0000~2359임). time은 장소의 시간대로 보고됩니다.
    • close - 장소가 언제 영업이 끝나는 지를 설명하는 날짜와 시간 객체의 쌍이 포함됩니다.
• rating: 장소의 평점입니다(사용자 검토 기준 0.0~5.0). 보다 자세한 평점을 보려면 aspects[] 배열의 내용을 확인하세요.
• reference는 향후 세부정보 서비스를 쿼리하는 데 사용될 수 있는 토큰을 포함합니다. 이 토큰은 세부정보 서비스에 대한 요청에 사용된 참조와 다를 수 있습니다. 지역정보에 저장된 참조 자료는 정기적으로 업데이트하는 것이 좋습니다. 이 토큰이 고유하게 장소를 식별하지만 역으로 생각하면 그렇지 않습니다. 즉, 한 장소에는 여러 개의 유효한 참조 토큰이 있을 수 있습니다.
• reviews: 최대 5개까지의 리뷰 배열입니다. 각 리뷰는 다음과 같은 7개의 구성 요소로 구성됩니다.
  • aspects[]에는 PlaceAspectRating 객체 배열이 포함되어 있고 각 객체는 시설의 단일 속성에 대한 평점을 제공합니다. 배열의 첫 번째 객체가 기본 항목으로 간주됩니다. 각 PlaceAspectRating은 다음과 같이 정의됩니다.
    • type: 평점이 매겨진 항목의 이름입니다 (예: 분위기, 서비스, 음식, 전체 등)
    • rating: 특정 항목에 대한 사용자의 평점입니다(0~3).
  • author_name: 리뷰를 제출한 사용자의 이름입니다. 익명의 리뷰는 'Google 사용자'로 간주됩니다. 언어 매개변수가 설정되면 구문 'Google 사용자'는 현지화된 문자열을 반환합니다.
  • author_url: 사용자의 Google+ 프로필에 대한 URL입니다(사용 가능한 경우).
  • text: 사용자 리뷰가 포함됩니다. Google 지역정보를 사용하여 위치를 리뷰하면 텍스트 리뷰는 선택 사항으로 간주되므로 이 필드는 비워둘 수 있습니다.
  • time: UTC 1970년 1월 1일 자정 이후 초로 측정된 리뷰 제출 시간입니다.
• types: 이 장소에 대한 유형의 배열(예: ["political", "locality"] 또는 ["restaurant", "establishment"]).
• url: 관련 Google 지역정보 페이지의 URL입니다.
• vicinity: 거리 이름, 번지, 지역을 포함하여 장소의 단순화된 주소를 나열하지만 시/도, 우편번호 또는 국가는 나열되지 않습니다. 예를 들어 Google의 오스트레일리아 시드니 사무실에는 5/48 Pirrama Road, Pyrmont의 vicinity 값이 있습니다. vicinity 속성은 지역정보 검색에 대해서만 반환됩니다.
• website: 업체 홈페이지와 같이 이 장소에 대한 신뢰할 수 있는 웹사이트를 나열합니다.

다차원 평점은 일부 지역에는 사용할 수 없습니다. 리뷰가 너무 적을 경우 세부정보 응답에는 0.0~0.5점의 기존 평점이 포함되거나(가능한 경우) 평점이 전혀 표시되지 않을 수도 있습니다.

지역정보 자동 완성

지역정보 자동 완성 기능은 웹페이지의 텍스트 입력란에 연결되어 입력란의 문자 항목을 모니터링합니다. 텍스트가 입력되면 자동 완성 기능이 장소 예상 검색어를 드롭다운 선택 목록 형태로 애플리케이션에 반환합니다.

사용자가 목록에서 장소를 선택하면 장소에 대한 정보가 자동 완성 객체에 반환되므로 애플리케이션에서 검색할 수 있습니다.

자동 완성 추가

자동 완성 생성자는 다음 두 인수를 받습니다.

• text유형의 HTML input 요소. 자동 완성 서비스가 모니터링하고 결과를 첨부할 입력 필드입니다.
• options 인수. 다음 항목이 포함될 수 있습니다.
  • types. 두 개의 명시적인 유형 중 하나 또는 두 유형 컬렉션 중 하나를 지정할 수 있습니다. 지원되는 유형은 다음과 같습니다.
    • geocode는 지역정보 서비스가 지오코딩(주소) 결과만 반환하도록 지시합니다.
    • establishment는 지역정보 서비스가 업체 결과만을 반환하도록 지시합니다.
    • (regions) 유형 콜렉션은 지역정보 서비스가 다음 유형과 일치하는 모든 결과를 반환하도록 지시합니다.
      • locality
      • sublocality
      • postal_code
      • country
      • administrative_area1
      • administrative_area2
    • (cities) 유형 콜렉션은 지역정보 서비스가 locality 또는 administrative_area3과 일치하는 결과를 반환하도록 지시합니다.
  • bounds는 장소를 검색할 영역을 지정하는 google.maps.LatLngBounds 객체입니다. 결과는 이 경계 내에 포함된 장소로 바이어스되지만 이에 제한되지는 않습니다.
  • componentRestrictions은 특정 그룹으로 결과를 제한하는 데 사용할 수 있습니다. 현재 componentRestrictions을 사용하여 국가별로 필터링할 수 있습니다. 국가는 두 개의 문자로 구성된 ISO 3166-1 Alpha-2 호환 국가 코드로 전달 되어야 합니다.

아래의 예제에서는 경계 및 유형 매개변수를 사용하여 다음과 같이 지정된 지역 내에서 업체에 대한 결과를 바이어스합니다.

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

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

아래의 예제에서는 다음과 같이 프랑스 내의 도시로 자동 완성 요청을 제한합니다.

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

컨트롤을 만들면 입력을 위해 지정한 텍스트 입력란을 모니터링하고 입력란에 텍스트를 입력하면 장소 예상 검색어를 반환합니다.

검색 영역 변경

자동 완성이 지역정보를 검색하는 영역을 변경하려면 자동 완성 객체에서 setBounds()를 호출합니다.

autocomplete.setBounds(bounds);

뷰포트가 변경될 때에도 지도의 뷰포트에 대한 결과가 바이어스되도록 하려면 자동 완성 객체의 bindTo() 함수를 사용합니다.

autocomplete.bindTo('bounds', map);

예제 보기(places-autocomplete.html)

장소 정보 가져오기

사용자가 텍스트 입력란에 첨부된 예상 검색어에서 장소를 선택하면 서비스가 place_changed 이벤트를 실행합니다. 또한 지역정보 서비스는 자동 완성 객체에서 getPlace()를 호출하여 액세스할 수 있는 PlaceResult 객체를 반환합니다.

google.maps.event.addListener(autocomplete, 'place_changed', function() {
  var place = autocomplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
  var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(35, 35));
  marker.setIcon(image);
  marker.setPosition(place.geometry.location);

  infowindow.setContent(place.name);
  infowindow.open(map, marker);
});

PlaceResult 객체에 대한 자세한 내용은 이 문서의 지역정보 세부정보 결과 섹션을 참조하세요.

자리 표시자 텍스트 변경하기

기본적으로 자동 완성 서비스에서 생성된 텍스트 필드는 표준 자리 표시자 텍스트를 포함합니다. 텍스트를 수정하려면 input 요소에 대해 placeholder 속성을 설정합니다.

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

기본 자리 표시자 텍스트는 자동으로 현지화됩니다. 즉, 고유한 자리 표시자 값을 지정하면 값에 대한 모든 현지화가 사용자의 애플리케이션에서 처리됩니다. Maps API에서 사용할 언어를 선택하는 방법에 대한 자세한 내용은 V3 Maps API의 현지화를 참조하세요.

달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 3.0 라이선스에 따른 라이선스가 부여되며, 코드 예제에는 Apache 2.0 라이선스에 따른 라이선스가 부여됩니다. 자세한 내용은 Google의 사이트 정책을 참조하세요.

Last updated 1월 31, 2013.

출처 : https://developers.google.com/maps/documentation/javascript/places?hl=ko