다음 지도 API > jquery

<style type="text/css">
.customoverlay {position:relative;bottom:50px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay li {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url("<?=$board_skin_url?>/img/arrow_white.png") no-repeat right 14px center;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
.customoverlay:after {content:"";position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url("<?=$board_skin_url?>/img/vertex_white.png")}
</style>

<div id="map" style="width:800px;height:385px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?=$daum_map_api_key?>&libraries=services"></script>
<script>
var mapContainer = document.getElementById("map"), // 지도 출력 div
	mapOption = {
		center: new daum.maps.LatLng(33.450701, 126.570667), // 중심좌표
		level: 4 // 확대 레벨
};

var map = new daum.maps.Map(mapContainer, mapOption); // 지도 생성
var geocoder = new daum.maps.services.Geocoder(); //  주소-좌표 변환 객체 생성

geocoder.addressSearch("<?=$view['wr_1']?>", function(result, status) { // 주소로 좌표 검색
	if (status === daum.maps.services.Status.OK) { // 정상 검색시
		var coords = new daum.maps.LatLng(result[0].y, result[0].x);
		var marker = new daum.maps.Marker({ map:map, position:coords }); // 결과값 위치를 마커로 표시
		map.setCenter(coords); // 지도 중심을 결과값 위치로 이동

		// 커스텀 오버레이 html
		var content = '<div class="customoverlay">' +
			'  <li>' +
			'    <span class="title"><?=$view["wr_subject"]?></span>' +
			'  </li>' +
			'</div>';

		var position = coords; // 커스텀 오버레이 출력 위치
		var customOverlay = new daum.maps.CustomOverlay({ map:map, position:position, content:content, yAnchor:1 }); // 커스텀 오버레이 생성
	}
});
</script>