[API] 네이버 지도API 사용하기 2탄 - 마커 및 인포 윈도우 표시 (1개인 경우)

안녕하세요!

코딩전사 추추입니다.

 

저번 포스팅에 이어서

네이버 지도 API에 관련된 내용을 포스팅하고자 합니다.

 

네이버 지도 API를 어떻게 표시해야하는지 알고 싶으시다면

아래 포스팅을 보고 오시면 좋을 것 같습니다!

[API] 네이버 지도API 사용하기 1탄 - 등록 및 페이지에 표시

 

1. 마커 및 인포윈도 표시하기 - 1개의 경우

/* map 객체를 담음 */
var map = null;
/* marker 객체를 담음 */
var marker;
/* infoWindow 객체를 담음 */
var infoWindow;

function map(){
    	// 1. 지도 생성, var map에 map객체 담기
    map = new naver.maps.Map('map', {
        center : new naver.maps.LatLng(기본위도, 기본경도), // 기본 위치
        zoom : 15	// 지도의 기본 줌 레벨
    });

    // 2. 지도에 마커 표시 하기 , var marker에 marker객체 담기
    marker = new naver.maps.Marker({
        position : new naver.maps.LatLng(마커위도, 마커경도),	// 마커를 표시할 위치(필수)
        map : map,	// 마커를 표시할 map 객체(필수)
        icon : { 	// 마커 아이콘에 대한 정보
            // 마커 아이콘 수정할 경우
            url : "마커이미지를 바꿀경우 마커이미지 경로",
            size : new naver.maps.Size(25, 32), // 화면에 나타나는 마커의 크기
            scaledSize : new naver.maps.Size(25, 32)  // 아이콘 이미지 크기
        }
    });

    // 3. 인포윈도우, infoWindow에 infoWindow 객체 담기
    infoWindow = new naver.maps.InfoWindow({
        content : "<div class='클래스를 입력해 디자인 수정 가능'>" + 인포윈도우에 들어갈 내용 + "</div>",
        borderWidth : 0,  // 인포윈도우 테두리 두께
        disableAnchor : true,  // 인포윈도우 말풍선 꼬리 사용 여부
        backgroundColor : '색상' // 인포윈도우 인포윈도우 배경색
    });

    // 4. 마커에 클릭이벤트
    naver.maps.Event.addListener(marker, "click", fn_clickHandler());

    // 5. 마커 위치로 지도 이동
    map.setCenter(new naver.maps.LatLng(마커위도, 마커경도)); // 지도 중심 설정
    map.setZoom(15); // 지도 줌 단계 설정
}

// 마커 클릭 이벤트
function fn_clickHandler(){
    return function(e) {
        if (infoWindow.getMap()) {
            // 1. 인포윈도우가 열려 있을 경우 -> 닫음
            infoWindow.close();
        } else {
            // 2. 인포윈도우가 닫혀 있을 경우 -> 표시
            infoWindow.open(map, marker);
        }
    }
}

다음 편에선 마커 여러 개와 각 마커마다 인포윈도우를 표시하는 방법을 알아보겠습니다!

지금까지 코딩전사 추추였습니다.

감사합니다.🥰