Kakao Maps API : 웹페이지 또는 블로그 포스트에 다수의 지도 생성하는 방법
하나의 웹페이지 또는 하나의 포스트에 여러 개의 지도를 표시하는 방법
을 소개합니다. 알고 나면 간단하고 당연하지만, 처음에 당황한 기억이 있어 기록으로 남겨둡니다. 카카오 지도 API 기본적인 사용법은 이전 포스트 또는 공식 가이드를 참고해주세요.카카오 지도 WEB API : 지도 그리기, 마커 표시, 지도 범위 설정 등 기본 사용법 정리
Kakao Maps API : 장소 ID 가져와서 지도 표시 하는 방법 카카오 지도 WEB API 가이드, 예제, 공식문서는 웹 프로그래밍을 모르는 제가 봐도 쉽게 사용 할 수 있도록 정리가 잘 되어 있습니다. 이 포스트
juahnpop.tistory.com
다수의 지도 표시하기
기본 지도 생성 코드
아래 코드는 기본적인 지도를 생성하는 코드입니다. 공식 가이드의 첫 번째 예제 코드입니다. 아래의 코드를 보면 지도를 표시할 컨테이너를 선택(mapContainer)하고, 지도 중심 위치와 배율을 설정하는 옵션(mapOption)을 설정 후 kakao.map.Map() 메서드로 지도를 생성합니다.
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>기본 지도 생성 코드 - 실행 결과
위 코드를 이 포스트에 삽입한 결과는 아래와 같습니다.
추가 지도 생성 하기 코드
저는 같은 웹페이지 내에 지도를 하나 더 만들기 위해 단순히 위의 코드를 한번 더 사용했는데, 정상적으로 지도가 만들어지지 않는 것을 확인하였습니다. 문제점이 무엇인지 고민해보니, 아래의 문제점 때문으로 생각되었습니다.
- 요소(element)의 id는 하나의 웹 페이지 내에 유니크(unique)한 값으로 설정되어야 하는데 map이란 이름의 중복된 id 요소가 발생
- javascript의 var mapContainer = document.getElementById('map') 명령에서 어느 div를 지정할 것인지 명확해지지 않음
결론적으로, 이를 해결하기 위해서 아래 코드와 같이 지도를 담을 div 요소의 id가 중복되지 않도록 코드를 수정하고, script 코드에서 중복되는 변수명을 사용하지 않도록 코드를 수정하였습니다.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
....
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
....
<div id="map2" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer2 = document.getElementById('map2'), // 지도를 표시할 div
mapOption2 = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
</script>
....
</body>
</html>
추가 지도 생성 하기 코드 : 실행 결과
위에서 두 번째 지도를 생성하는 코드를 이 블로그에서 실행하면 아래와 같이 추가 지도가 하나 더 생성됩니다.
알고 나면 당연하고 단순한 문제였으나, 저는 기본기가 없어 이것을 가지고 한참을 고민했습니다..ㅎㅎ
요약
- map을 담을 div의 id명을 중복 사용하지 않는다.
- map에 추가되는 오버레이 요소들의 id도 마찬가지로 중복 사용하지 않는다.
- 지도의 종류별로 javascript의 변수명을 중복 사용하지 않는다.
끝까지 읽어 주셔서 감사합니다^^
'Programming > WEB' 카테고리의 다른 글
| 카카오 지도 WEB API : 장소 ID 받아오기 및 지도 URL 생성 (1) | 2021.05.09 |
|---|---|
| 카카오 지도 WEB API : setBounds(bounds) 내부 영역 범위 조정하기 (0) | 2021.05.09 |
| 카카오 지도 WEB API : 지도 그리기, 마커 표시, 지도 범위 설정 등 기본 사용법 정리 (2) | 2021.05.08 |
| 카카오 지도 생성기 WEB API : 여러 개 마커가 있는 지도 생성, 확인 후 임베드 하기 - 여행 경로 용도 (1) | 2021.05.07 |
| 카카오 지도 WEB API : API KEY 받는 방법 및 시작하기 (0) | 2021.05.07 |