Naver Maps API v3 지도 가변크기적용

문제

네이버지도API를 사용하고 있다. 지도객체(naver.maps.Map)를 웹브라우저창의 크기에 따라 늘였다 줄였다(가변크기) 하려고 한다. 그러나 일반적인 접근으로는 크기가 바뀌지 않는다.

 

실마리

1. 네이버 지도객체(naver.maps.Map)는 크기를 나타내는 별도의 자료형, 크기를 변경하는 메소드가 존재한다.

크기를 나타내는 자료형 : naver.maps.Size( <너비> , <높이> )

크기를 변경하는 메소드 : (naver.maps.Map).setSize( naver.maps.Size )

2. 크기가 브라우저창에 따라 변화하도록 하려면 js의 resize이벤트를 사용한다.

addEventListener('resize', function(){ .... }); 하거나 window.onresize=function(){...}; 하거나

 

해결 - 화면전체를 채우도록 하는 예제

// 네이버 맵 생성
var mapOptions = {
    center: new naver.maps.LatLng(37.550179, 127.073627),
    zoom: 12
};
let map = new naver.maps.Map('map', mapOptions);
 
// 네이버 맵 크기조정
window.addEventListener('DOMContentLoaded', function(){
    resize();
    window.addEventListener('resize', resize);
});
 
function resize(){
    var Size = new naver.maps.Size(window.innerWidth, window.innerHeight);
    map.setSize(Size);
}
 

 

해결 - header영역, footer영역을 제외한 영역을 채우도록 하는 예제

// 네이버 맵 생성
var mapOptions = {
    center: new naver.maps.LatLng(37.550179, 127.073627),
    zoom: 12
};
let map = new naver.maps.Map('map', mapOptions);
 
// 네이버 맵 크기조정
window.addEventListener('DOMContentLoaded', function(){
    resize();
    window.addEventListener('resize', resize);
});
 
function resize(){
    var mapWidth = window.innerWidth;
    var mapHeight = window.innerHeight  - document.getElementById('appHead').offsetHeight 
                                        - document.getElementById('appFooter').offsetHeight;
    var Size = new naver.maps.Size(mapWidth, mapHeight);
    map.setSize(Size);
}