4weeks_회고 step01

🎄 Key Function

맡은 Page에서 중요하게 작업한 부분은 요청페이지에서 주소 검색 후 마커가 찍히는 페이지입니다.
주소 검색을 위해서 검색어를 가지고 google-map-api에서 좌표값을 반환하는 과정을 거쳐서 마커가 찍힐 수 있도록 진행했습니다.

const apiUrl = `https://maps.googleapis.com/maps/api/place/details/json?place_id=${placeId}&fields=name,rating,formatted_phone_number,geometry&key=${API}`;

여기서 입력 받은 검색어가 아닌 placeId라는 값을 받는데요.
주소 검색을 할 경우 response되는 값을 보게 되면

Object {
      "description": "대한민국 서울특별시 사근동 한양대학교 올림픽체육관",
      "id": "12463d33b8bdfd47226a73755607aa4852a0488e",
      "matched_substrings": Array [
        Object {
          "length": 5,
          "offset": 15,
        },
      ],
      "place_id": "ChIJ56RRJqWkfDUR9r07Uzc5MGQ",
      "reference": "ChIJ56RRJqWkfDUR9r07Uzc5MGQ",
      "structured_formatting": Object {
        "main_text": "한양대학교 올림픽체육관",
        "main_text_matched_substrings": Array [
          Object {
            "length": 5,
            "offset": 0,
          },
        ],
        "secondary_text": "대한민국 서울특별시 사근동",
      },
      "terms": Array [
        Object {
          "offset": 15,
          "value": "한양대학교 올림픽체육관",
        },
        Object {
          "offset": 11,
          "value": "사근동",
        },
        Object {
          "offset": 5,
          "value": "서울특별시",
        },
        Object {
          "offset": 0,
          "value": "대한민국",
        },
      ],
      "types": Array [
        "premise",
        "establishment",
      ],
    },
  ]

이렇게 반환을 하게 되게 됩니다. 처음에는 좌표값을 얻기 위해서는 main_text를 가지고 api를 호출했는데, 좌표값을 반환되는 값도 있었지만, 좌표값을 반환하지 못하는 값도 있었습니다. 하지만 place_id로 api를 호출하니, 검색되서 선택된 모든 주소의 좌표값을 얻을 수 있었습니다. 아마 고유한 key값으로 인식할 수 있기 때문인 것 같습니다.