배포후 빈 화면이 나오고있습니다

지도/로컬 API에 대한 문의게시판입니다.
스크린샷 2021-11-08 오후 5.13.48
배포후 카카오맵을 사용하는 페이지 제외하고 모두 잘 랜딩되고 있습니다
React로 구현하였습니다
스크린샷 2021-11-08 오후 5.16.17
index.js파일 로직
앱키는 발급받아서 JS앱키를 사용하였습니다

useEffect(() => {
    let infowindow = new kakao.maps.InfoWindow({ zIndex: 1 })
    const container = document.getElementById('myMap')
    const options = {
      center: new kakao.maps.LatLng(37.566826, 126.9786567),
      level: 3,
    }
    const map = new kakao.maps.Map(container, options);
    const ps = new kakao.maps.services.Places(); 
    ps.keywordSearch(district + searchingPlace,placesSearchCB); // 주변 포함 검색

    function placesSearchCB(data, status, pagination) {
      if (status === kakao.maps.services.Status.OK) {
        let bounds = new kakao.maps.LatLngBounds();
        for (let i = 0; i < data.length; i++) {
          displayMarker(data[i])
          bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x))
        }
        map.setBounds(bounds)
      }
    }

  function displayMarker(place) { // 장소 마커(핀) 기능
    let marker = new kakao.maps.Marker({
      map: map,
      position: new kakao.maps.LatLng(place.y, place.x),
    })
    // 마커에 클릭이벤트
    kakao.maps.event.addListener(marker, 'click', function () {
    // 마커를 클릭하면 장소명이 표출됨(infowindow)
      infowindow.setContent('<div style="padding:5px;font-size:12px;font-weight: 700;">' + place.place_name + '</div>')
      infowindow.open(map, marker)
      setCurnPlace(place.place_name); // 핀 클릭 시 현재 장소 값으로 저장
    })
  }
},[district, searchingPlace])

카카오맵 컴포넌트
스크린샷 2021-11-08 오후 5.19.31
도메인등록도 하였습니다

어디부분에서 문제가 생기는지 알수있을까요?

1개의 좋아요

키워드로장소검색 API 호출 시 필수 파라미터인 쿼리값이 비어있는 상태로 호출되어
MissingParameter:query parameter required 오류가 남아있는 것으로 보입니다.

해당 부분 확인 후 다시 호출해보세요.

감사합니다 해당문제는 API문제로 확인하였습니다
정말 감사합니다!

1개의 좋아요

안녕하세요, 혹시 어떻게 해결하셨는지 알려주실 수 있나요? 저도 우분투로 배포했는데 지도만 안나와서요ㅠㅠ

@cg2261

사용하시는 도메인이 앱 정보에 정상적으로 등록이 되었는 지 한번 확인해보세요.

1개의 좋아요

cannot read properties of undefined

오류는

dapi.kakao.com/v2/maps/sdk.js?appkey=

이 URL로부터 다운로드 받는 sdk가 다운로드가 잘 되지 않았을때 발생할 수 있습니다.
이땐 appkey가 허용하는 도메인리스트가 잘못 설정되어 있어 발생할 수 있습니다. 이를 한번 확인해 보시기 바랍니다.

  1. 이외에는 sdk는 불러왔으나, 실제 지도 코어가 아직 로딩되지 않은 상태에서 실행될때 발생할 수 있습니다.
    이때는
    Kakao 지도 Web API Documentation
    위 문서페이지의 load 함수를 활용해 보시기 바랍니다.
1개의 좋아요

제가 프로젝트를 팀 단위로 진행했었는데
각자 자신의 AWS로 배포할 때는, 하나의 key를 나누어 쓰면 안되고
웹 플랫폼에 url 등록후 자신의 키를 사용해야 됐었어요…! ㅠㅠ 답변 감사합니다!!

다행히 생각보다 간단하게 해결되었어요!!
친절한 답변 정말 감사합니다ㅠㅠ 좋은 하루 되세요!!

1개의 좋아요