카카오 지도/로컬 API에서 Click 이벤트 발생시 지도 생성 관련 질문입니다

지도/로컬 API
#1

[사용 도구 : HTML5, Jquer-3.3.1.min.js]

안녕하세요. 저는 현재 클릭 이벤트 발생시에만 동적으로 카카오 지도를 뿌려주는 기능을 개발하고 있습니다.
구현하고 있는 로직은 다음과 같습니다.

  1. 페이지 로딩시 $.ajax 함수를 통하여 동적으로 HTML Elements 생성

  2. 동적으로 생성된 요소중 태그에 대하여 클릭 이벤트 함수 추가

  • 동적으로 생성된 요소의 구조
    carbon
  1. 태그 클릭시 형제 요소인
    태그에 kakao map 출력

    추가로 동적으로 지도를 생성하기 위하여 태그에

    를 등록하였으며

    아래 이미지는 태그 클릭시 발생하는 이벤트에 대한 정의입니다.
    carbon (1)

    이렇게 구성한 후 실행시켜 보면
    kakao.maps.LatLng is not a constructor 에러가 발생하게 되는데

    원인을 정확히 모르겠습니다.

    다만, 의심이 가는 부분이
    Kakao Map API 스크립트 선언부에서 "autolaod=false"를 등록했을때와 안했을 때
    추가적인

    위 스크립트가 생성이 되지 않는다는 점입니다.

    조언 부탁드립니다.

#2

보통 지도 SDK가 제대로 로딩하지 못한 상황에서 발생하는 오류입니다.
아래 링크 참고해주세요.

http://apis.map.kakao.com/web/documentation/#load_load

1개의 좋아요
#3

먼저 답변 감사드립니다.

알려주신 참조 링크로 들어가보니, 아래 이미지를 언급해주시는 것 같았습니다.

다만, SDK를 스크립트로 로드 시킬 때 이미지에서 보시다시피 URL Parameter로 autolaod=false뿐만아니라,
appkey도 전달을 해주어야 하는게 아닌가요?

또한, kakao.maps.load(function() {})의 위치는 상관이 없을까요?
위 질문을 드린 이유는, 이미 쪽에서는 JQuery의 ready 함수가 동작을 하게끔 선언이 되어 있기 때문입니다.

0020202

#4

jQuery의 onload, ready 이벤트 핸들링 시점과는 상관 없이
autoload=false 로 지정하여 로딩 시도한 스크립트는 반드시
kakao.maps.load 함수로 등록한 콜백 안쪽에서 시작해야 합니다.

즉, 아래와 같이 되어야 합니다.

$(function() {
    kakao.maps.load(function() {
        console.assert(kakao.maps.LatLng);
    });
});

// 혹은
$(document).ready(function() {
    kakao.maps.load(function() {
        console.assert(kakao.maps.LatLng);
    })
});
1개의 좋아요
#5

답변 감사드립니다. ^^

그렇다면 SDK 로드 스크립트 URL에 대해서는

저같은 경우 현재 //dapi.kakao.com/v2/maps/sdk.js?appkey={할당받은 JS KEY}로 사용하고 있지만
02020202020

//dapi.kakao.com/v2/maps/sdk.js?autoload=false로 변경을 해줘야 하는 걸까요?

아니면,

//dapi.kakao.com/v2/maps/sdk.js?appkey={할당받은 JS KEY}&autoload=false 처럼 파라미터를 이어붙이는 형식으로 지정이 되어야 하는걸까요?

#6

이어붙이셔야 합니다.
앱키는 인증을 위한 것이며
autoload 파라메터랑은 별개이니까요.

순서는 상관 없습니다.

1개의 좋아요
#7

알려주신데로 코드를 수정해보니
SDK 스크립트 로드, kakao.maps.load(function(){ … }) 동작까지 확인했습니다.

여기서 한가지 더 나아가 궁금한 것이 아래 이미지와 같이
0202

전체

태그에 대해 지도를 로드해주는 것이 아닌,

특정 클릭 이벤트를 통해 하나의

태그에 대해서만 지도를 출력시키는 방법이 있을까요?
[클릭이 되었을때만 이벤트로 하여금 위도, 경도 값을 전달받아 각각 다른 위치를 지도로 하나씩!!! 출력해야 하기 떄문입니다.]

kakao.maps.load(function(){ … }) 함수 내에 클릭 이벤트 함수를 추가로 전달을 해줄 수 있는지 궁금합니다.

아니면 클릭 이벤트로 하여금 kakao.maps.load(function(){ … })을 호출하여 하나의

태그에 대해서만
지도를 생성 할 수 있는지요?
#8

자답 댓글입니다.

kakao.maps.load(callback)을 다루게 되면서

코드 위쪽에 함수를 값으로 받을 변수를 하나 설정해두고,

v3가 로드되고 나서 kakao.maps.load(callback)이 실행되므로 callback 함수의 반환값으로

함수를 반환하였고

이는 즉, 클릭 이벤트 함수를 선언한 것과 동일합니다.

이렇게 설정하니 정상적으로 동작이 되더군요

힌트 감사합니다.

1개의 좋아요