다음지도 api 질문드립니다. 채택완료

</p><p><div id="map" style="width:100%;height:350px;"></div></p><p>    <style></p><p>    .wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}</p><p>    .wrap * {padding: 0;margin: 0;}</p><p>    .wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}</p><p>    .wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}</p><p>    .info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}</p><p>    .info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('<a href="<a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png</a>"><a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png</a></a>');}</p><p>    .info .close:hover {cursor: pointer;}</p><p>    .info .body {position: relative;overflow: hidden;}</p><p>    .info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}</p><p>    .desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</p><p>    .desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}</p><p>    .info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}</p><p>    .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('<a href="<a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png</a>"><a href="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png" target="_blank" rel="noopener noreferrer">http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png</a></a>')}</p><p>    .info .link {color: #5085BB;}</p><p></style></p><p><script></p><p>var mapContainer = document.getElementById('map'), // 지도를 표시할 div  </p><p>    mapOption = { </p><p>        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표</p><p>        level: 3 // 지도의 확대 레벨</p><p>    };</p><p>
</p><p>var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다</p><p> </p><p>// 마커를 표시할 위치와 title 객체 배열입니다 </p><p>var positions = [</p><p>    {</p><p>        content: '<div class="wrap">' + </p><p>            '    <div class="info">' + </p><p>            '        <div class="title">' + </p><p>            '            카카오 스페이스닷원' + </p><p>            '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + </p><p>            '        </div>' + </p><p>            '        <div class="body">' + </p><p>            '            <div class="img">' +</p><p>            '                <img src="<a href="<a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a>"><a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a></a>" width="73" height="70">' +</p><p>            '           </div>' + </p><p>            '            <div class="desc">' + </p><p>            '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + </p><p>            '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + </p><p>            '                <div><a href="<a href="<a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a>"><a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a></a>" target="_blank" class="link">홈페이지</a></div>' + </p><p>            '            </div>' + </p><p>            '        </div>' + </p><p>            '    </div>' +    </p><p>            '</div>', </p><p>        latlng: new daum.maps.LatLng(33.450705, 126.570677)</p><p>    },</p><p>    {</p><p>        content: '<div class="wrap">' + </p><p>            '    <div class="info">' + </p><p>            '        <div class="title">' + </p><p>            '            카카오 스페이스닷원' + </p><p>            '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + </p><p>            '        </div>' + </p><p>            '        <div class="body">' + </p><p>            '            <div class="img">' +</p><p>            '                <img src="<a href="<a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a>"><a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a></a>" width="73" height="70">' +</p><p>            '           </div>' + </p><p>            '            <div class="desc">' + </p><p>            '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + </p><p>            '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + </p><p>            '                <div><a href="<a href="<a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a>"><a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a></a>" target="_blank" class="link">홈페이지</a></div>' + </p><p>            '            </div>' + </p><p>            '        </div>' + </p><p>            '    </div>' +    </p><p>            '</div>', </p><p>        latlng: new daum.maps.LatLng(33.450936, 126.569477)</p><p>    },</p><p>    {</p><p>        content: '<div class="wrap">' + </p><p>            '    <div class="info">' + </p><p>            '        <div class="title">' + </p><p>            '            카카오 스페이스닷원' + </p><p>            '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + </p><p>            '        </div>' + </p><p>            '        <div class="body">' + </p><p>            '            <div class="img">' +</p><p>            '                <img src="<a href="<a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a>"><a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a></a>" width="73" height="70">' +</p><p>            '           </div>' + </p><p>            '            <div class="desc">' + </p><p>            '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + </p><p>            '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + </p><p>            '                <div><a href="<a href="<a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a>"><a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a></a>" target="_blank" class="link">홈페이지</a></div>' + </p><p>            '            </div>' + </p><p>            '        </div>' + </p><p>            '    </div>' +    </p><p>            '</div>', </p><p>        latlng: new daum.maps.LatLng(33.450879, 126.569940)</p><p>    },</p><p>    {</p><p>        content: '<div class="wrap">' + </p><p>            '    <div class="info">' + </p><p>            '        <div class="title">' + </p><p>            '            카카오 스페이스닷원' + </p><p>            '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + </p><p>            '        </div>' + </p><p>            '        <div class="body">' + </p><p>            '            <div class="img">' +</p><p>            '                <img src="<a href="<a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a>"><a href="http://cfile181.uf.daum.net/image/250649365602043421936D" target="_blank" rel="noopener noreferrer">http://cfile181.uf.daum.net/image/250649365602043421936D</a></a>" width="73" height="70">' +</p><p>            '           </div>' + </p><p>            '            <div class="desc">' + </p><p>            '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + </p><p>            '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + </p><p>            '                <div><a href="<a href="<a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a>"><a href="http://www.kakaocorp.com/main" target="_blank" rel="noopener noreferrer">http://www.kakaocorp.com/main</a></a>" target="_blank" class="link">홈페이지</a></div>' + </p><p>            '            </div>' + </p><p>            '        </div>' + </p><p>            '    </div>' +    </p><p>            '</div>',</p><p>        latlng: new daum.maps.LatLng(33.451393, 126.570738)</p><p>    }</p><p>];</p><p>
</p><p>for (var i = 0; i < positions.length; i ++) {</p><p>    // 마커를 생성합니다</p><p>    var marker = new daum.maps.Marker({</p><p>        map: map, // 마커를 표시할 지도</p><p>        position: positions[i].latlng, // 마커를 표시할 위치</p><p>    });</p><p>
</p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">//오버레이 시작</span></p><p style="margin-left: 40px;"><span style="font-size: 11pt; background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">var overlay = new daum.maps.CustomOverlay({</span></p><p style="margin-left: 80px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">content: positions[i].content,</span></p><p style="margin-left: 80px;"><span style="font-size: 11pt; background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">position: positions[i].latlng,</span></p><p style="margin-left: 80px;"><span style="font-size: 11pt; background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">map: map, // 마커를 표시할 지도</span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">});</span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다</span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">daum.maps.event.addListener(marker, 'click', function() {</span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">    overlay.setMap(map);</span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">});</span></p><p>
</p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 </span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">function closeOverlay() {</span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">    overlay.setMap(null);     </span></p><p style="margin-left: 40px;"><span style="background-color: rgb(119, 176, 43); color: rgb(255, 255, 255);">}</span></p><p>
</p><p>}</p><p></script></p><p>