이 페이지는 Cloud Translation API를 통해 번역되었습니다.

장소 아이콘

플랫폼 선택: Android iOS JavaScript 웹 서비스

유럽 경제 지역 (EEA) 개발자

소개

장소 아이콘은 다양한 유형의 장소 (예: 커피숍, 도서관, 박물관)를 나타냅니다. 장소 찾기, 장소 세부정보, 주변 검색, 텍스트 검색 요청을 사용하여 PNG 또는 SVG 형식의 아이콘 URL 및 해당하는 아이콘 배경색을 요청할 수 있습니다. 아이콘은 인라인으로 사용할 수 있습니다.

각 아이콘은 두 가지 응답 필드로 정의됩니다.

아이콘 기본 URI에는 색상이 지정되지 않은 아이콘의 기본 URL에서 파일 형식 확장자를 뺀 값이 포함됩니다. 아이콘을 요청하려면 URI에 .svg 또는 .png를 추가해야 합니다.
아이콘 배경 색상에는 장소 카테고리의 기본 16진수 색상 코드가 포함됩니다.

아이콘 URL은 변경될 수 있으므로 항상 아이콘 기본 URI를 사용하여 아이콘의 URL을 찾아야 합니다. Places API (기존)는 icon 응답 필드를 지원합니다. icon 필드를 사용하지 말고 대신 Places API (기존)에서 icon_background_color 및 icon_mask_base_uri를 사용하세요.

예

다음 예는 Places API (신규) 및 Places API (기존)의 아이콘 URI 및 배경 색상을 요청하는 방법을 보여줍니다. 두 버전의 API에서 요청과 응답이 다릅니다.

Places API(신규)

다음 예에서는 Text Search(New)(텍스트 검색(신규))를 사용하여 장소의 표시 이름과 iconMaskBaseUri 및 iconBackgroundColor 응답 필드를 반환합니다.

curl -X POST -d '{
  "textQuery" : "skog haus",
  "maxResultCount" : 1
}' \
-H 'Content-Type: application/json' -H 'X-Goog-Api-Key: API_KEY' \
-H 'X-Goog-FieldMask: places.displayName,places.iconMaskBaseUri,places.iconBackgroundColor' \
'https://places.googleapis.com/v1/places:searchText'

응답 형식은 다음과 같습니다.

{
  "places": [
    {
      "iconMaskBaseUri": "https://maps.gstatic.com/mapfiles/place_api/icons/v2/cafe_pinlet",
      "iconBackgroundColor": "#FF9E67",
      "displayName": {
        "text": "SKÖG Haus Coffee & Tea",
        "languageCode": "en"
      }
    }
  ]
}

Places API (기존)

다음 예는 icon_mask_base_uri 및 icon_background_color 필드가 포함된 장소 찾기 (기존) 요청을 보여줍니다.

    https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=skog%20haus&inputtype=textquery&fields=name,icon_mask_base_uri,icon_background_color&key=API_KEY

다음 예는 장소 찾기 (기존) 요청의 응답에 icon_mask_base_uri 및 icon_background_color 필드가 표시되는 방식을 보여줍니다.

JSON

    {
      "candidates" : [
          {
            "icon_background_color" : "#FF9E67",
            "icon_mask_base_uri" : "https://maps.gstatic.com/mapfiles/place_api/icons/v2/cafe_pinlet",
            "name" : "SKÖG Haus Coffee",
          }
      ],
      "status" : "OK"
    }

XML

    <FindPlaceFromTextResponse>
      <candidates>
        <name>SKÖG Haus Coffee</name>
        <icon_background_color>#FF9E67</icon_background_color>
        <icon_mask_base_uri>https://maps.gstatic.com/mapfiles/place_api/icons/v2/cafe_pinlet</icon_mask_base_uri>
      </candidates>
      <status>OK</status>
    </FindPlaceFromTextResponse>

아이콘을 표시하려면 반환된 아이콘 URI에 원하는 파일 형식 확장자 (.png 또는 .svg)를 추가하고 아이콘을 반환된 배경색과 결합합니다. 예를 들어 웹페이지에 .svg 아이콘을 표시하려면 다음을 실행합니다.

<style>
  .icons-food-drink {
    background-color: #ff9e67;
    width: 88px;
    height: 88px;
    padding: 5px;
  }
</style>

<img src="https://maps.gstatic.com/mapfiles/place_api/icons/v2/cafe_pinlet.svg" alt="Cafe" class="icons-food-drink"/>