[다음 API] 지도 하얀 화면 / 지도 보이지 않는 이유

다음 API 를 사용하다 지도가 하얀 화면으로 처리되어 보이지 않는 경우가 발생했다.

다음 카페 및 검색을 통해 찾은 결과 위의 현상이 발생하는 경우에 몇 가지 원인이 있었다.

1. 잘못 입력된 API 키 

<script type="text/javascript" src="//apis.daum.net/maps/maps3.js apikey=9d067b4d9b2d1c1b6cecfea21df553a5&libraries=services"></script>

2. 파일 주소로 된 경우

<script type="text/javascript"

src="//apis.daum.net/maps/maps3.js?apikey=9d067b4d9b2d1c1b6cecfea21df553a5&libraries=services"></script>

src="//apis.~~"

를 보면 //apis는 파일 경로이므로 자신의 홈페이지에 따라 http, https 를 붙여줘야 한다.

3. map 이 여러개 생성된 경우

var map = new daum.maps.Map(mapContainer, mapOption);

이 경우는 잘 모르겠으나 Map 객체가 여러개 생성되면 지도가 표현이 안 되는 경우가 있다고 한다.

4. 같은 id를 사용할 경우

<div id="map" ... >

<div id="menu_wrap" ...>

...

위 예제와 같이 다음 주소 api 공식 홈페이지의 예시에서는 id로 구현되어 있다.

하지만 위의 코드를 여러번 붙여 쓰다보면 id가 중복이 되어 첫 번째 객체만 지도가 잘 표현되고 두번째 이후의 객체들은 지도가 잘 보이지 않게 된다.

나 같은 경우 react를 사용하기 때문에 component로 표현하다보니 id가 중복된 경우가 생겼다.

이럴 때는 아래와 같이 document.getElementByID("map") 대신 refs 를 사용하면 된다.

// id 를 사용할 경우

<div id="map">

let map = document.getElementById("map");

// ref 를 사용할 경우

<div ref="map">

let map = this.refs.map;