키워드로 장소검색하기

'이태원 맛집'으로 장소를 검색하고 검색결과를 지도 위에 마커로 표시합니다. 마커를 클릭하면 인포윈도우에 장소명을 표시합니다.

사용한 데이터를 보시려면 여기를 클릭하세요!

original docs : https://apis.map.kakao.com/web/sample/keywordBasic/

결과

Loading...

라이브 에디터

function(){ const [info, setInfo] = useState() const [markers, setMarkers] = useState([]) const [map, setMap] = useState() useEffect(() => { if (!map) return const ps = new kakao.maps.services.Places() ps.keywordSearch("이태원 맛집", (data, status, _pagination) => { if (status === kakao.maps.services.Status.OK) { // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 // LatLngBounds 객체에 좌표를 추가합니다 const bounds = new kakao.maps.LatLngBounds() let markers = [] for (var i = 0; i < data.length; i++) { // @ts-ignore markers.push({ position: { lat: data[i].y, lng: data[i].x, }, content: data[i].place_name, }) // @ts-ignore bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x)) } setMarkers(markers) // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다 map.setBounds(bounds) } }) }, [map]) return ( <Map // 로드뷰를 표시할 Container center={{ lat: 37.566826, lng: 126.9786567, }} style={{ width: "100%", height: "350px", }} level={3} onCreate={setMap} > {markers.map((marker) => ( <MapMarker key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`} position={marker.position} onClick={() => setInfo(marker)} > {info &&info.content === marker.content && ( <div style={{color:"#000"}}>{marker.content}</div> )} </MapMarker> ))} </Map> ) }

function(){
  const [info, setInfo] = useState()
  const [markers, setMarkers] = useState([])
  const [map, setMap] = useState()

  useEffect(() => {
    if (!map) return
    const ps = new kakao.maps.services.Places()

    ps.keywordSearch("이태원 맛집", (data, status, _pagination) => {
      if (status === kakao.maps.services.Status.OK) {
        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        const bounds = new kakao.maps.LatLngBounds()
        let markers = []

        for (var i = 0; i < data.length; i++) {
          // @ts-ignore
          markers.push({
            position: {
              lat: data[i].y,
              lng: data[i].x,
            },
            content: data[i].place_name,
          })
          // @ts-ignore
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
        }
        setMarkers(markers)

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
        map.setBounds(bounds)
      }
    })
  }, [map])

  return (
    <Map // 로드뷰를 표시할 Container
      center={{
        lat: 37.566826,
        lng: 126.9786567,
      }}
      style={{
        width: "100%",
        height: "350px",
      }}
      level={3}
      onCreate={setMap}
    >
      {markers.map((marker) => (
        <MapMarker
          key={`marker-${marker.content}-${marker.position.lat},${marker.position.lng}`}
          position={marker.position}
          onClick={() => setInfo(marker)}
        >
          {info &&info.content === marker.content && (
            <div style={{color:"#000"}}>{marker.content}</div>
          )}
        </MapMarker>
      ))}
    </Map>
  )
}