주소좌표검색후 커스텀오버레이 생성 문의

[ejk2000]

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
  mapOption = { 
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    }; 
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다    
 // 주소-좌표 변환 객체를 생성합니다   
var geocoder = new daum.maps.services.Geocoder();   
var listData = [    
{groupAddress: '역삼동 682' , },   
{groupAddress: '역삼동 683' , },   
];       
for (var i=0; i < listData.length ; i++){
// 주소로 좌표를 검색합니다    
geocoder.addressSearch(listData[i].groupAddress, 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);      
 }      
})       
};       

이후 리스트별로 커스텀오버레이를 생성하는 코드가 궁금합니다.

[doji.doo]

코드에서 마커를 생성하는 시점에 커스텀 오버레이를 생성하시면 됩니다.
생성 방법은 문서 샘플에 여럿 나와있습니다.

좀 더 디테일한 방법을 찾으신다면 이 곳 DevTalk 검색창에 ‘커스텀 오버레이’ 로 검색해 보세요.

[ejk2000]

안녕하세요?
답변에 재차 감사드립니다. 기본지식이 없이 뭘 활용하려다 보니 정말 어려움이 많습니다.
그럼에도 불구하고 해주시는 답변에 하나하나 공부가 되는것 같습니다.
정말 제 나름대로 열심히 찾아 봤는데 답을 아직 구하지 못했습니다.
어디를 수정해야 할지 지적 좀 해주시기 부탁드립니다.

<div id="map" style="width:100%;height:900px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};  
// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
var listData = [
' 역삼동 682 ', 
' 역삼동 683 ', 

];
for (var i = 0; i < listData.length; i ++) {    
listData.forEach(function(addr, index) {
geocoder.addressSearch(addr, 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});
var position = listData[i].coords
var customoverlay = new daum.maps.customoverlay({
content: '<div class ="label"><span class="left"></span><span class="center">대한민국빌딩!</span><span class="right"></span></div>';,
position: listData[i]
});
//customoverlay.open(map, marker); 
customOverlay.setMap(map);   
map.setCenter(coords);}});
})};
</script>

CSS 는 예제와 같습니다.
장소가 2개이상일때 코드구현이 저한테는 좀 어렵습니다.

[doji.doo]

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};  
// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
var listData = [
' 역삼동 682 ', 
' 역삼동 683 '
];
    
listData.forEach(function(addr, index) {
    geocoder.addressSearch(addr, function(result, status) {
        if (status === daum.maps.services.Status.OK) {
        var coords = new daum.maps.LatLng(result[0].y, result[0].x);
        var customoverlay = new daum.maps.CustomOverlay({
        content: '<div class ="label"><span class="left"></span><span class="center">'+ listData[index] +'</span><span class="right"></span></div>',
        position: coords
        });
        customoverlay.setMap(map); 
        map.setCenter(coords);
    }});
})

[ejk2000]

<div id="map" style="width:100%;height:900px;"></div>
<script>

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};  
// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
var listData = [
' 역삼동 682 ', 
' 역삼동 683 '
];
var listData1 = [
' 역삼동 682빌딩 ', 
' 역삼동 683빌딩 '
];
    
listData.forEach(function(addr, index) {
    geocoder.addressSearch(addr, function(result, status) {
        if (status === daum.maps.services.Status.OK) {
        var coords = new daum.maps.LatLng(result[0].y, result[0].x);
        var customoverlay = new daum.maps.CustomOverlay({
        content: '<div class ="label"><span class="left"></span><span class="center">'+ listData1[index] +'</span><span class="right"></span></div>',
        position: coords
        });
        customoverlay.setMap(map); 
        map.setCenter(coords);
    }});
})
</script>

대단히 감사 합니다.
listdata1을 추가하여 해당번지에 명칭을 붙일수 있겠습니다.
그런데 제 원래 취지는 마커에 오버레이를 생성시키는거 였거든요.
여기서 마커를 추가로 올릴수 있나요?
그리고 텍스트 생성위치가 약간 밑으로 처지는데 보정방법이 있나요?
ancor로는 전체가 다 움직이네요.
단순무식한 질문만 드리는것 같아 정말 죄송하네요. 대신 열심히 공부하겠습니다.

[doji.doo]

이거 뭐… 제가 코딩을 해 드리면 공부가 되나요. ㅎㅎ
이 이후부터는 API 기능과 직접적으로 관련이 없는 질문에 대한 답변은 하지 않을게요.

마커는 기존에 썼던 코드 한 줄 그대로 넣으시면 되고

커스텀 오버레이의 미세한 위치 조절은
생성자 옵션의 yAnchor 값으로 가능합니다.
http://apis.map.daum.net/web/documentation/#CustomOverlay

화이팅

[ejk2000]

<div id="map" style="width:100%;height:900px;"></div>
<script>

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};  
// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();   
var listData = [    
{groupAddress: '역삼동 682' , },   
{groupAddress: '역삼동 683' , },   
];       
for (var i=0; i < listData.length ; i++){
// 주소로 좌표를 검색합니다    
geocoder.addressSearch(listData[i].groupAddress, 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);      
 }      
})       
};       

var listData = [
 ' 역삼동 682 ',   
 ' 역삼동 683 ',   
];           
var listData1 = [
' 역삼동 682빌딩 ', 
' 역삼동 683빌딩 ',
];
    
listData.forEach(function(addr, index) {
    geocoder.addressSearch(addr, function(result, status) {
        if (status === daum.maps.services.Status.OK) {
        var coords = new daum.maps.LatLng(result[0].y, result[0].x); 
            var customoverlay = new daum.maps.CustomOverlay({
        content: '<div class ="label"><span class="left"></span><span class="center">'+ listData1[index] +'</span><span class="right"></span></div>',
        position: coords,
         xAnchor: 0.5,
         yAnchor: 2.21

        });
        customoverlay.setMap(map); 
        map.setCenter(coords);
    }});
})
</script>

에휴~~~
그 한줄 넣었는데 안되네요. 지도자체가 생성이 안됩니다.
해서 그냥 마커 생성코드를 넣었더니 뭐 강제로 되는것 같네요. 무식한 방법이죠?
답변 사양이라는 말에 제 가슴이 철렁하고 그네를 타네요.
고령의 나이에 좀 힘드네요… 화이팅 해주셨으니 뭐 강담해보죠
정말 감사합니다.

[ejk2000]

안녕하세요? 염치없이 또 문을 두드리게 되었네요.

 // 장소 검색 객체를 생성합니다      			
var ps = new daum.maps.services.Places();       			
// 키워드로 장소를 검색합니다        			
ps.keywordSearch(' 	서이천 IC	 ', placesSearchCB);        	
// 키워드 검색 완료 시 호출되는 콜백함수 입니다    			
function placesSearchCB (data, status, pagination) {      			
 if (status === daum.maps.services.Status.OK) {      			
 // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해   			
 // LatLngBounds 객체에 좌표를 추가합니다      			
 var bounds = new daum.maps.LatLngBounds();      			
 for (var i=0; i<data.length; i++) {     			
 displayMarker(data[0]);          			
 bounds.extend(new daum.maps.LatLng(data[0].y, data[0].x)); }       			
 // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다   			
 map.setBounds(bounds); } }        			
// 지도에 마커를 표시하는 함수입니다       			
function displayMarker(place) {         			
 // 마커를 생성하고 지도에 표시합니다      			
    var marker = new daum.maps.Marker({map: map, position: new daum.maps.LatLng(place.y, place.x) })};			
   			

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
        '<span class="title">서이천IC2.4km</span>' + '</a>' +
    '</div>';

// 커스텀 오버레이가 표시될 위치입니다 
    var position = makerposition ;  

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
    map: map,
    position: position,
    content: content,
    yAnchor: 1 
}); 

위와 같이 장소검색후 커스텀오버레이를 생성시키는 위치 코드를 마커생성위치를 어떻게 잡아줘야할지 여러방법을 해봐도 구현이 안됩니다. 도와주시기 부탁드립니다.
// 커스텀 오버레이가 표시될 위치입니다
var position = makerposition ; (?)

[doji.doo]

ps.keywordSearch('이태원 맛집', function(data, status) {
  if (status === daum.maps.services.Status.OK) { 
    var place = data[0];
    var position = new daum.maps.LatLng(place.y, place.x);

    var marker = new daum.maps.Marker({
      map: map,
      position: position
    });	

    var content = 'something new'
    var customOverlay = new daum.maps.CustomOverlay({
      map: map,
      position: position,
      content: content,
      yAnchor: 3
    }); 

    map.setCenter(position);
  }
}); 

더 자세히 가르쳐 드려도 별 의미가 없을 듯 합니다.
어짜피 이거 알려드려도 이후에 막히면 또 다시 찾아오실 거잖아요.

문서의 예제 코드는 자바스크립트의 기본만 알아도 대충 의미를 파악할 수 있습니다.
현재 질문 하신 것만 봐도, 저희가 제공하는 예제 코드의 조합에 불과하며
왜 원하는 기능 구현에 필요하지도 않은 반복문을 썼는지,
이 객체는 결국 안쓰는데 왜 남겨 놨는지 등,
예제 코드의 의미 파악이 안되시는 것 같아요.

line by line으로 코드 분석이 되지 않으시면 아무래도
자바스크립트를 잘 하시는 분께 맡기시는게 맞는 것 같습니다.

이 후에도 질문이야 자유롭게 하셔도 좋지만, (당연하죠. 오픈된 공간이니까)
그 @ejk2000 님의 질문이 최소한 Devtalk에서 질문하시는 다른 입문 개발자 분들의 수준과 비슷하다고 판단되면 그건 답변 드릴게요.
이 쓰레드와 같이 마이크로 티칭을 해드려야 하는 수준의 질문은 답변은 하지 않을겁니다. 적어도 저는 말이죠. 저와 질문자분 둘 다에게 해롭습니다.

[ejk2000]

안녕하세요?
우선 제가 수준이 낮은 상태에서 여러가지 허접한 질문을 드리고 그로인해 아까운 시간을 빼앗은것 같아 사과의 말씀 드립니다.
질책성 답변 잘 받아 드리겠습니다.
약간의 변명을 드리자면…
정석대로 하자면 자바스크립트를 정복하고나서 개발을 하든지 취미나 아님 업무에 필요하다고 판단되서 코드를 만들던지 해야 겠지요.
그러나 공부를 했다고 하더라도 필요한 코드가 머리속에 있어서 타이핑하면 그대로 출력되서 나오는건 아니지 않나요?
제가 이 분야를 잘 몰라서 드리는 말씀인지 몰라도 대부분 개발자들도 다 예제를 참고로 하고 인용도 해보고 조합도 해보고 그러지 않나요?
저도 인용한 예제를 가지고 구현하다가 우선 막히는 부분에 대한 해결책이 궁금하였기에 일부 필요치 않은 객체등의 정리 보다 우선 해서 질문을 드리게 된것입니다.
또한가지는 믾은 분들이 느끼셨는지 모르지만 코드상 컴마하나 괄호하나가 코드 구현자체를 좌지우지 하기 때문에 뭘 하나 건드리기가 두려울 때도 있습니다.
"그러나까 공부를 하고 덤벼야지 " 라는 얘기가 들리는것 같네요.
이건 정말 필요없는 얘기지만 제 나이 63세 … 지금 이라도 해야겠지요.
자바스크립트의 기본도 모르는 사람이 수준있는 토크장에서 많은 실례를 범했습니다.
다시한번 죄송하다는 말씀 드립니다. 또 찾아오죠.
남들만큼 수준있는 질문을 엄청 갈망하는 한 사람이 글을 남깁니다.

[doji.doo]

개인마다 배움의 성향이 있고 뭐가 더 자신에게 맞는 방법인지는 자신만이 알기 때문에
위에 변명이라 말씀하셨지만 그 말 다 옳습니다. 맞고요.
그리고 저도 많은 부분에서 말씀하신 대로 그렇게 접근하고 있습니다.
응용 프로그래밍을 해야 하는 입장에서는 당연히 그래야 하고요.

위에 제가 드린 장문의 답변은 나이든 연차든 경력이든 소속이든 다 고려하지 않고
개발자 대 개발자로 말씀드린 겁니다.

그냥 취미로 개발을 하시는 거라면
(시간이 많기에) 아마도 혼자 기본을 더 공부하고 찾아 보셨을 거라 생각되며,
그 과정에서 충분히 답을 얻을 만한 수준의 질문입니다.

만약 업으로 해야만 하는 경우라면
(시간이 충분하지는 않지만) 더더욱 위와 같은 질문 흐름은 독이 됩니다.
그 기능이 그냥 그렇게 완성되고 나면 남는게 없어요.
그리고 언제 달릴지 모르는 답변을 기다리고 답변 받아 구현하는 속도로는 프로젝트 기한 맞추기도 힘들거고요.
그래서 잘 아시는 분께 넘기라고 현실적인 조언을 드린겁니다.
실력을 비하할 의도는 없었습니다. 누구나 처음은 있고 그땐 다들 못하잖아요.

그리고 또 하나,
위의 질답들이 질문자분께는 배움의 과정으로 생각될지 모르겠지만
중요한 것은 그 배움의 과정에서 누군가의 리소스를 쓰고 있다는 겁니다.
그리고 질문자분께서 이렇게 해서 얻은 지식의 질도 좋지 않을거고요.

전체 과정이 비효율적이기 때문에 재고해 보시라고 좀 독하게 답변 드렸습니다.

[ejk2000]

안녕하세요?
약간 서먹한 기분이 들어 좀 어색하네요. 그럼에도 불구하고 질문 드립니다.
도와주신 덕분에 나름 기대한 결과에 접근하고 있어서 기분은 좋습니다(물론 제 개인적인 기분입니다)
코드와 결과물을 올립니다.

>   var geocoder = new daum.maps.services.Geocoder();		
> var listData = [		
> '	서울시 강남구 논현동 209-4	',
> '	서울시 강남구 논현동 208	',
> '	서울시 강남구 논현동 211-14	',
> '	서울시 강남구 논현동 210-1	',
> '	서울시 강남구 논현동 238	',
> '	서울시 강남구 논현동 115-13	',
> '	서울시 강남구 논현동 115-11	',
> '	서울시 강남구 논현동 115-2	',
> '	서울시 강남구 논현동 90-2	',
> '	서울시 강남구 논현동 84	',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> ];		
> var listData1 = [		
> '	유빔빌딩	',
> '	오창빌딩	',
> '	싸이칸홀딩스타워	',
> '	삼원빌딩	',
> '	쿠쿠빌딩	',
> '	라이브플렉스타워	',
> '	시그너스빌딩	',
> '	IB타워	',
> '	프뢰벨교육센터	',
> '	송암빌딩	',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> '		',
> ];		
> var listData2 = [		
> '	1)	',
> '	2)	',
> '	3)	',
> '	4)	',
> '	5)	',
> '	6)	',
> '	7)	',
> '	8)	',
> '	9)	',
> '	10)	',
> '	11)	',
> '	12)	',
> '	13)	',
> '	14)	',
> '	15)	',
> '	16)	',
> '	17)	',
> '	18)	',
> '	19)	',
> '	20)	',
> ];
> //for (var i = 0, len = listData.length; i < len; i++) {    
> listData.forEach(function(addr, index) {		
> geocoder.addressSearch(addr, 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});		
> var customoverlay = new daum.maps.CustomOverlay({		
> content: '<div class ="label"></span><span class="number">' + listData2[index] + '</span> <span class="boxtitle">' + listData1[index] +' </div>',		
> position: coords,		
> xAnchor: 0.5,		
> yAnchor: 2.7		
> });		    
> customoverlay.setMap(map);		
> map.setCenter(coords);	
> }});    
>     });		
>     		
> </script>			
> <style type="text/css">		
> .label {border-radius: 8px;border: 1px solid #7d7e7e; position:relative;margin-bottom:-1px;background:#fffbfb;padding:6px 10px;line-height: 0.5;}		
> .label .boxtitle {color:#0b0dfb;font-size:14px;font-weight:bold;background: url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png') no-repeat right 120px center;margin-bottom:5px;}		
> .label .number {color:#f70713;font-size:18px;font-weight:bold;}		
> .label :after {content:'';position: absolute; margin-left: -11px; left: 50%; bottom: -11px; width: 22px; height: 12px; background:url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png') }		
> </style>		

여기서 마커도 제거해서 결과물도 보고 하던중 커스텀오버레이가 겹치는 부분 때문에 오버레이를 드래그해서 위치를 개별적으로약간씩 이동시키면 더 보기에 좋은 결과물이 될것 같아 장시간 드래그하기 예제 코드와 for 반복문을 나름 이용하여 많은 시도를 해봤지만 구현이 안되네요. 방법을 좀 알려주시면 감사하겠습니다.
그리고 드래그하기 예제에서 좌표만 틀리게하고 코드를 똑같이 2개를 만들어서 해본 결과 두번째 오버레이는 드래그가 되는데 첫번째는 오버레이는 첫번째가 움직이지 않고 두번째가 움직이네요.

[doji.doo]

기획 의도는 기획자의 마음이지만
기능적 한계를 인지하고 사용자 겸험을 해치지 않는 선을 고려해야만 합니다.

map.kakao.com
map.naver.com
www.google.com/maps

위 지도 어플리케이션들에서 검색을 하면 그 검색 결과에 대해서
마커는 겹쳐서 표시 될 수 있지만 그 정보와 관련된 (스샷의 1~10까지 커스텀 오버레이 같은) 오버레이들은 바로 노출시키지 않고 마우스 인터렉션이 있는 경우만 노출하고 있습니다.
이는 검색된 결과를 찍은 마커들이 겹칠 수 있는 상황이 당연히 있고, 이 상황에서 정보까지 같이 노출하면 사용자 경험을 해칠 수 있기에 이와 같이 단계를 둔 UX를 기획한 겁니다.

만약 말씀하신대로 커스텀 오버레이를 옮길 수 있게 된다 한들
그게 그 위치를 정확하게 표현한게 될까요?
저는 오히려 지도가 제공하는 정보가 더 복잡해 질 것 같은데요.

그리고 어짜피 결과를 받아서 수동적으로 표출하고 있는 상황이므로
매 번 웹페이지를 새로 고침할때마다 위와 같은 위치에 나올건데,
그 때마다 겹쳐있는 걸 보면 사용자가 매번 드래그를 해서 봐야 할거에요.

이는 기술적 상황을 인지하고 기획적으로 다른 접근법을 생각하셔야 할 듯 합니다.

위의 서비스들처럼 구현 할 수도 있고,
지금 구현된 상태에서 특정 마커에 마우스 오버를 하면 그 마커와 매칭된 커스텀 오버레이의 z-index를 올려서 다른것들 보다 더 상위에 노출시켜주는 방식도 생각해 볼 수 있고요.

[ejk2000]

아~~~
저는 마커는 제위치에 있으니까 그 마커주변 적당한 위치에 오버레이만 약간 이동시켜줄수 있다면 겹침을 어느정도 해결할수있지 않을까 해서 드린 말씀입니다. 웹페이지에서의 동적인 상황보다 캡쳐한 그림을 자주 사용해서 그렇습니다.
기획이 그리 되어있다면 어쩔수 없겠네요.
구글지도를 이용해서 이렇게 쓰고 있었는데 구글지도가 좀 마음에 들지않아서…

답변 감사 합니다.