네이버 지도 마커 표시 - neibeo jido makeo pyosi

Question

반응형

지도 API에서는 아래 이미지와 같이 특정 좌표에 마커와 정보창을 표시하는 기능을 제공한다.

이번 예제에서는 필자와 필자의 애인의 집 주소에 마커를 찍고, 마커 위에 누구의 집인지 정보창으로 표시해볼 것이다.

먼저 전체 소스 코드를 보여주고 각각의 내용을 설명해보도록 하겠다.

1. 전체 소스 코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>집</title>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=pci7h12l33"></script>
</head>
<body>
    <div id="map" style="width:100%;height:100vh;margin:0 auto;"></div>

<script>
var HOME_PATH = window.HOME_PATH || '.';


map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(36.31175, 127.3754709),
    zoom: 13
});


var hyeonjinHouse = new naver.maps.LatLng(36.30260, 127.33838);
var jooyeokHouse = new naver.maps.LatLng(36.32611, 127.41263);


var markers = [];
var infowindows = [];


markers.push(new naver.maps.Marker({
    map: map,
    position: hyeonjinHouse
}));

infowindows.push(new naver.maps.InfoWindow({
    content: [
        '<div class="iw_inner">',
        '   <h3>현진이네 집</h3>',
        '</div>'
    ].join('')
}));


markers.push(new naver.maps.Marker({
    map: map,
    position: jooyeokHouse
}));

infowindows.push(new naver.maps.InfoWindow({
    content: [
        '<div class="iw_inner">',
        '   <h3>주역이네 집</h3>',
        '</div>'
    ].join('')
}));

for(let i=0; i<markers.length; i++){
    naver.maps.Event.addListener(markers[i], "click", function(e) {
        if (infowindows[i].getMap()) {
            infowindows[i].close();
        } else {
            infowindows[i].open(map, markers[i]);
        }
    });
}

infowindows[0].open(map, markers[0]);
</script>
</body>
</html>

2. 소스 코드 부분 설명

1) HTML 부분

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>집</title>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=pci7h12l33"></script>
</head>
<body>
    <div id="map" style="width:100%;height:100vh;margin:0 auto;"></div>
    
...

javascript에서 네이버 지도에서 제공하는 클래스들을 이용하기 위해, <script> 태그로 maps.js 파일을 불러왔다.

그리고 지도는 웹 페이지의 전체 화면에 표시되게 하였다. vh는 웹 페이지의 높이를 100분의 1단위로 쪼갠 것이다.

2) Map 생성

map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(36.31175, 127.3754709),
    zoom: 13
});

지도 객체이다.

center : 초기 중심 좌표 (LatLng에는 위도와 경도를 작성하면 된다.)

zoom : 확대의 정도 (6->축척 100km, 13->축척 1km, 21->축척 5m)

더 많은 옵션 확인 - Map

https://navermaps.github.io/maps.js.ncp/docs/naver.maps.html

NAVER Maps API v3

NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.

navermaps.github.io

3) 좌표 설정

var hyeonjinHouse = new naver.maps.LatLng(36.30260, 127.33838);
var jooyeokHouse = new naver.maps.LatLng(36.32611, 127.41263);

두 집의 좌표값을 LatLng 객체로 저장해두었다.

4) 배열 선언

var markers = [];
var infowindows = [];

마커 객체와 정보창 객체를 담을 배열을 선언했다.

5) 마커 생성

markers.push(new naver.maps.Marker({
    map: map,
    position: jooyeokHouse
}));

마커 객체를 생성하여 markers 배열에 추가한다.

map : 마커를 표시할 지도

position : 좌표 객체

더 많은 옵션 확인 - Marker

https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Marker.html

NAVER Maps API v3

NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.

navermaps.github.io

6) 정보창 생성

infowindows.push(new naver.maps.InfoWindow({
    content: [
        '<div class="iw_inner">',
        '   <h3>주역이네 집</h3>',
        '</div>'
    ].join('')
}));

정보창 객체를 생성하여 infowindows 배열에 추가한다.

content : 정보창을 표현하는 HTML코드

(join('') : 배열의 모든 요소를 연결해 하나의 문자열로 만들어줌)

더 많은 옵션 보기 - InfoWindow

https://navermaps.github.io/maps.js.ncp/docs/naver.maps.InfoWindow.html

NAVER Maps API v3

NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.

navermaps.github.io

7) 리스너 추가

for(let i=0; i<markers.length; i++){
    naver.maps.Event.addListener(markers[i], "click", function(e) {
        if (infowindows[i].getMap()) {
            infowindows[i].close();
        } else {
            infowindows[i].open(map, markers[i]);
        }
    });
}

마커를 눌러서 정보창을 표시하거나 숨길 수 있도록 모든 마커에 리스너를 추가했다.

click 외의 더 많은 이벤트들 확인

https://navermaps.github.io/maps.js.ncp/docs/tutorial-UI-Event.html

NAVER Maps API v3

NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.

navermaps.github.io

8) 정보창 미리 표시하기

infowindows[0].open(map, markers[0]);

미리 표시해둘 정보창을 지정했다.

※ InfoWindow 클래스로 정보 창을 생성하게 되면, 동시에 여러 개의 정보 창을 띄울 수 없다. 이 때는 HTML 마커 또는 사용자 정의 오버레이를 이용하여 정보창을 생성하면 된다.

(참고) 네이버 지도 JavaScript API 완벽 가이드 – 오버레이 편

https://d2.naver.com/helloworld/3380225

실행 결과

반응형

게시글 관리

구독하기김코더 김주역

저작자표시

'OpenAPI > Javascript API' 카테고리의 다른 글

[OpenAPI] 네이버 지도 API(4) - 데이터베이스 연동 (0)2021.08.13[OpenAPI] 네이버 지도 API(2) - javascript 튜토리얼 (0)2021.08.10[OpenAPI] 네이버 지도 API(1) - 내 애플리케이션 생성 (0)2021.08.10

네이버 지도 API 네이버 지도 infowindow 네이버 지도 팝업