반응형
네이버지도 초기화 할 때는 지도가 표시되어 있는 영역을 아래와 같이 비워주면 된다.
$('#지도를 삽입할 영역의 id').empty();
◆ 기존 지도를 초기화하지 않고 새 지도를 생성하는 경우
지도를 초기화하지 않고 계속 생성하면 기존 지도가 지워지는 게 아니라 기존 지도 위에 새 지도가 얹어지게 된다.
이 경우 아래 그림과 같이 새 지도의 줌을 컨트롤하거나 할 때 아래의 기존 지도와 겹쳐서 보이게 되는데, 특히 우측 하단의 줌 레벨이 적인 부분을 보면 해당 증상을 쉽게 확인할 수 있다.
<body>
<div id="mainMap" style="width:100%;height:700px;"></div>
<input type="button" value="인천공항" onclick="setMarkers(37.458666, 126.4419679)">
<input type="button" value="김포공항" onclick="setMarkers(37.5655383, 126.8013282)">
<input type="button" value="청주공항" onclick="setMarkers(36.7219682, 127.4958842)">
<input type="button" value="대구공항" onclick="setMarkers(35.899067, 128.639159)">
<input type="button" value="제주공항" onclick="setMarkers(33.5070772, 126.4934311)">
<script>
function setMarkers(lat, lng) {
var map = new naver.maps.Map('mainMap', {
center: new naver.maps.LatLng(lat, lng),
zoom: 13,
zoomControl : true,
zoomControlOptions : {
position : naver.maps.Position.TOP_RIGHT,
style: naver.maps.ZoomControlStyle.SMALL
}
});
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(lat, lng),
map: map
});
}
$(document).ready(function() {
setMarkers(37.458666, 126.4419679)
});
</script>
</body>
◆ 기존 지도를 초기화 한 뒤 새 지도를 생성하는 경우
기존 지도를 초기화 한 뒤 새 지도를 생성하는 경우는 아래 그림과 같이 새 지도의 줌을 컨트롤하거나 할 때 겹치는 부분 없이 새 지도만 깔끔하게 표시된다.
<body>
<div id="mainMap" style="width:100%;height:700px;"></div>
<input type="button" value="인천공항" onclick="setMarkers(37.458666, 126.4419679)">
<input type="button" value="김포공항" onclick="setMarkers(37.5655383, 126.8013282)">
<input type="button" value="청주공항" onclick="setMarkers(36.7219682, 127.4958842)">
<input type="button" value="대구공항" onclick="setMarkers(35.899067, 128.639159)">
<input type="button" value="제주공항" onclick="setMarkers(33.5070772, 126.4934311)">
<script>
function setMarkers(lat, lng) {
$('#mainMap').empty(); //지도영역 초기화
var map = new naver.maps.Map('mainMap', {
center: new naver.maps.LatLng(lat, lng),
zoom: 13,
zoomControl : true,
zoomControlOptions : {
position : naver.maps.Position.TOP_RIGHT,
style: naver.maps.ZoomControlStyle.SMALL
}
});
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(lat, lng),
map: map
});
}
$(document).ready(function() {
setMarkers(37.458666, 126.4419679)
});
</script>
</body>
[네이버 지도] 로컬환경(localhost)에서 NAVER 지도 API v3 사용 하기
[네이버 지도] NAVER 지도의 출력 언어 변경하기 + 예제
[네이버 지도] NAVER 지도에 마커(Marker) 표시하기 (단일,다중마커) + 예제
[네이버 지도] NAVER 지도 이미지를 마커(Marker)로 사용하기 + 예제
[네이버 지도] NAVER 지도 초기화 하기+ 예제
[네이버 지도] AI NAVER API - Maps(지도) 무료 이용량 제공 중단 관련
[네이버 지도] Application Services 상품의 Maps API 사용 방법
글 내용 중 잘못된 부분이 있거나, 첨부하실 내용이 있으시면 댓글로 남겨주세요. 공부하는데 많은 도움이 됩니다.
-- 기억의 유효기간은 생각보다 짧다. --
반응형
'언어 > JavaScript' 카테고리의 다른 글
| [카카오 지도] KAKAO 지도 생성하기 + 예제 (2) | 2025.01.28 |
|---|---|
| [카카오 지도] KAKAO 지도 앱 키(APP KEY) 발급 및 WEB 플랫폼 등록 방법 (2) | 2025.01.28 |
| [네이버 지도] NAVER 지도 이미지를 마커(Marker)로 사용하기 + 예제 (0) | 2024.09.15 |
| [네이버 지도] NAVER 지도에 마커(Marker) 표시하기 (단일,다중마커) + 예제 (0) | 2024.09.13 |
| [네이버 지도] NAVER 지도의 출력 언어 변경하기 + 예제 (5) | 2024.09.11 |