k

네이버 지도 API 다중마커 구현 소스 입니다.

드디어 정리를 했네용...
대충 읽어보시면 이해가 갈것이라 생각합니다^^

테스트 사이트
http://www.moga.co.kr/motel/motel_map.html

참고사항
1. 지도창의 너비는 100%가 가능하지만 높이는 100%를 넣으면 에러가 남 px단위로 px를 제외하고 입력
2. 마커=>설명창 변수ID 전달 방법으로 title를 이용하기 때문에 title를 다른 방법으로 이용 할 수가 없습니다.
3. 설명창에서 보여질 변수가 많을경우 oMarkerParam 변수를 변경, 늘리셔서 사용하시면 됩니다.
    * 3번항목은 테스트 사이트를 참고 하시기 바랍니다.^^

4. 꼭 앞에 jquery 해주세요.~

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버API키값"></script>
<script type="text/javascript">
<!--
var oMarkerParam = new Array();
$(document).ready(function(){
 var oCenterPoint = new nhn.api.map.LatLng(지도의 중심x좌표, 지도의 중심y좌표);
 nhn.api.map.setDefaultPoint('LatLng');
 oMap = new nhn.api.map.Map('naver_map', {
    point : oCenterPoint,
    zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
    enableWheelZoom : false,
    enableDragPan : true,
    enableDblClickZoom : false,
    mapMode : 0,
    activateTrafficMap : false,
    activateBicycleMap : false,
    minMaxLevel : [ 1, 14 ],
    size : new nhn.api.map.Size(지도창 너비, 지도창 높이)
 });

 var markerCount = 0;
 // 컨트롤 설정
 var mapZoom = new nhn.api.map.ZoomControl();
 mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
 oMap.addControl(mapZoom);
 //마커 이미지, 사이즈 설정
 var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
 var oOffset = new nhn.api.map.Size(31, 38);
 var oIconOn = new nhn.api.map.Icon('마커아이콘 이미지', oSize, oOffset);
 // 마커의 기본 표시 설정
 var infoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
 var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
 oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
 oMap.addOverlay(infoWindow); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
 
 //마커 추가
 <?
 //마커 쿼리 반복문 위치

 $i = 0;

 while($list = mysql_fetch_array($result)){
 ?>
 var oPoint = new nhn.api.map.LatLng(x좌표,y좌표);
 var oMarker = new nhn.api.map.Marker(oIconOn, {
  title : '<?=$i?>',
  zIndex : 1
 });

 //변수전달 방법, 배열사용

 oMarkerParam[<?=$i?>] = '';

 oMarker.setPoint(oPoint);
 oMap.addOverlay(oMarker);
 //첫 마커의 설명창만 보이게 설정

<? if($i==0){ ?>
 oMap.setCenter(oMarker.getPoint());
 infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[<?=$i?>]);
 infoWindow.setPoint(oMarker.getPoint());
 infoWindow.setVisible(true);
 infoWindow.setPosition({right : 5, top : 20});
 infoWindow.autoPosition();
 <? } ?>
 <?

  $i++;

 }

 ?>

 oMap.attach('click', function(oCustomEvent) {
  var oTarget = oCustomEvent.target;
  var oMarkerId = oCustomEvent.target.getTitle();
  // 마커 클릭하면
  if (oTarget instanceof nhn.api.map.Marker) {
   
   //oTarget.setIcon(oIconOn);
   oMap.setCenter(oMarker.getPoint());
   infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[oMarkerId]);
   infoWindow.setPoint(oMarker.getPoint());
   infoWindow.setVisible(true);
   infoWindow.setPosition({right : 5, top : 20});
   infoWindow.autoPosition();
   return;
  }
 });
});


//-->
</script>

<div id="naver_map"></div>

|

댓글 9개

앗 죄송합니다.
소스가 몇군데 틀렸네요. 제가 실제 적용한 것은 마커의 종류가 2가지로 나누어 있어서
그 부분을 제외하고 정리해서 올린다는게 오타를 냈네용 ㅠㅠ 죄송합니다.

지금 쪽지로 보내드렸습니다.^^ 오타부분은
1. var oMarker = new nhn.api.map.Marker(oIconNo, {
=> var oMarker = new nhn.api.map.Marker(oIconOn, {

2. }
return;
}

=> return;
}

이 두가지를 수정하시면 됩니다 위의 소스는 다시 수정해놓았습니다.
수정된 소스는 쪽지로 보내드렸습니다.^^
님 친절한 답변에 감사드립니다. 그런데 쪽지로 받은 소스자료에서 키값,아이콘 이미지주소값 변경후 실행하니 마찬가지로 흰 백지만 나타나네요. 혹시나 해서 query 데이타 echo 로 보면 제대로 위도,경보, 잘 나타나는데ㅠㅠㅠㅠ.. 꼭 되게 하고싶은데...
님 좀 힘드시더라도 제가 최종 소스를 한번 더올릴테니 뭐가 잘못 됐는지 함만 더 봐주세요.. 부탁합니다.

<?
// 테이블이름을 파라미터로 받는다.
$pro_table = ( isset($HTTP_GET_VARS['table']) ? $HTTP_GET_VARS['table'] : 'map_busan' );
$pro_guru = ( isset($HTTP_GET_VARS['guru']) ? $HTTP_GET_VARS['guru'] : '2' );

// 필요한 함수가 정의된 config.php를 include시킨다.
include "config.php";

// Mysql Server에 접속한다. euckr 이 카페 홈페이지에서 한글깨지는걸 방지
$conn = mysql_connect( $set_host, $set_user, $set_password );
mysql_query("SET NAMES euckr");
mysql_select_db( $set_dbname );

switch($pro_guru){
case "1" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 6;
$condition = "where nsc='울산'";
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and nsc='울산'";
break;

case "2" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 6;
$condition = "where gubun = '모국' and nsc='울산'";
break;

case "3" :
$wdo = 35.556019;
$kdo = 129.3489941;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk = '울산'";
break;

case "4" :
$wdo = 35.556019;
$kdo = 129.3489941;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%울산성남%'";
break;

case "5" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%서울산%'";
break;

case "6" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%남울산%'";
break;

case "7" :
$wdo = 35.5075727;
$kdo = 129.3288307;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%동울산%'";
break;

case "8" :
$wdo = 35.5011338;
$kdo = 129.2965812;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%양정%'";
break;
case "9" :
$wdo = 35.6052646;
$kdo = 129.1773898;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%언양%'";
break;

case "10" :
$wdo = 35.4247293;
$kdo = 129.3128576;
$zoom = 7;
$condition = "where gubun = '모국' and nsc='울산'";
$condition1 = "where gubun = '자국' and moguk like '%온산%'";
break;
}
// 모국검색
$pro_id = ( isset($HTTP_GET_VARS['id']) ? $HTTP_GET_VARS['id'] : 0 );

// Search한 내용이 있는지 체크하여 쿼리에 반영한다.
$query = "select * from $pro_table $condition" ;
$result = mysql_query ( $query );


?>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=6232785d73f29469df8dbbdb10b6799a"></script>
<script type="text/javascript">
var oMarkerParam = new Array();
$(document).ready(function(){
var oCenterPoint = new nhn.api.map.LatLng(<?=$wdo?>,<?=$kdo?>);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('naver_map', {
point : oCenterPoint,
zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(700, 350)
});

var markerCount = 0;
// 컨트롤 설정
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
//마커 이미지, 사이즈 설정
var oSize = new nhn.api.map.Size(31, 38); //마커사이즈대로 설정
var oOffset = new nhn.api.map.Size(31, 38);
var oIconOn = new nhn.api.map.Icon('../00image/aa1.png', oSize, oOffset);
// 마커의 기본 표시 설정
var infoWindow = new nhn.api.map.InfoWindow(); // - info window 생성
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oMap.addOverlay(infoWindow); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.

//마커 추가
<?
//마커 쿼리 반복문 위치
$m = 0;
while($list = mysql_fetch_array($result)){

?>
var oPoint = new nhn.api.map.LatLng(<?=$list[we]?>,<?=$list[kng]?>);
var oMarker = new nhn.api.map.Marker(oIconOn, {
title : '<?=$m?>',
zIndex : 1
});
//변수전달 방법, 배열사용
oMarkerParam[<?=$m?>] = '변수값'+<?=$m?>;
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
//첫 마커의 설명창만 보이게 설정
<? if($m==0){ ?>
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[<?=$m?>]);
infoWindow.setPoint(oMarker.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
<? } ?>
<?
$m++;
}
?>

oMap.attach('click', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
var oMarkerId = oCustomEvent.target.getTitle();
// 마커 클릭하면
if (oTarget instanceof nhn.api.map.Marker) {
//oTarget.setIcon(oIconOn);
oMap.setCenter(oMarker.getPoint());
infoWindow.setContent('설명창 내용, 변수='+oMarkerParam[oMarkerId]);
infoWindow.setPoint(oTarget.getPoint());
infoWindow.setVisible(true);
infoWindow.setPosition({right : 5, top : 20});
infoWindow.autoPosition();
return;
}
});
});
</script>
<div id="naver_map"></div>
님 안녕하세요.... 4. 꼭 앞에 jquery 해주세요.~ 라는게 어떤 건지요...
제pc에서 기존에 마커 출력 되는 소스와 윗부분이 좀 다르네요..
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
이것을 추가해달라는 말입니다.^^
혹시 쪽지 보셨나요?? 쪽지로 질문을 드렸는데 소식이 없어 글 올립니다.
마커가 없는 지도부분 클릭할때 오류가 있네요
(익스플로러 오류 표시 기능으로 보면 오류팝업)

--
웹 페이지 오류 세부 정보

메시지: 개체가 'getTitle' 속성이나 메서드를 지원하지 않습니다.
줄: 3
문자: 132021
코드: 0
URI: http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=63dd915c2f912c67b98ad379e971dce3
--
오픈소스는 없을까요^^?? 짱이세요~
아주 예전에 작업해놓은것인데 참고하세요~
http://kiplayer.phps.kr/bbs/board.php?bo_table=comm_deve&wr_id=22
댓글을 작성하시려면 로그인이 필요합니다. 로그인

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12년 전 조회 5,611
12년 전 조회 1,240
12년 전 조회 2,857
12년 전 조회 2,312
12년 전 조회 530
12년 전 조회 2,990
12년 전 조회 1,437
12년 전 조회 1,342
12년 전 조회 1,401
12년 전 조회 3,323
12년 전 조회 2,095
12년 전 조회 3,754
12년 전 조회 8,626
12년 전 조회 4,236
12년 전 조회 3,802
12년 전 조회 1,407
12년 전 조회 1,487
12년 전 조회 3,197
12년 전 조회 4,038
12년 전 조회 4,442
12년 전 조회 1,657
12년 전 조회 1,343
12년 전 조회 936
12년 전 조회 1,034
12년 전 조회 2,772
12년 전 조회 2,785
12년 전 조회 1,308
12년 전 조회 2,845
12년 전 조회 1,330
12년 전 조회 8,510
12년 전 조회 1,564
12년 전 조회 3,822
12년 전 조회 6,436
12년 전 조회 1,618
12년 전 조회 2,879
12년 전 조회 638
12년 전 조회 1,346
12년 전 조회 1,203
12년 전 조회 1,370
12년 전 조회 3,362
12년 전 조회 1,143
12년 전 조회 1,863
12년 전 조회 1,300
12년 전 조회 962
12년 전 조회 1,438
12년 전 조회 2,149
12년 전 조회 1,435
12년 전 조회 1,318
12년 전 조회 1,846
12년 전 조회 1.5만
12년 전 조회 1,117
12년 전 조회 921
12년 전 조회 2,769
12년 전 조회 9,014
12년 전 조회 1,327
12년 전 조회 1,219
12년 전 조회 1,686
12년 전 조회 1,189
12년 전 조회 1,335
12년 전 조회 3,601
12년 전 조회 1,511
12년 전 조회 2,183
12년 전 조회 1,204
12년 전 조회 1,355
12년 전 조회 3,076
12년 전 조회 925
12년 전 조회 1,399
12년 전 조회 1,664
12년 전 조회 2,084
12년 전 조회 2,180
12년 전 조회 2,614
12년 전 조회 1,102
12년 전 조회 1,127
12년 전 조회 4,498
12년 전 조회 1,545
12년 전 조회 1,689
12년 전 조회 5,551
12년 전 조회 3,309
12년 전 조회 2,185
12년 전 조회 1,346
12년 전 조회 3,532
12년 전 조회 2,573
12년 전 조회 2,265
12년 전 조회 1,886
12년 전 조회 1,587
12년 전 조회 1,588
12년 전 조회 1,334
12년 전 조회 2,449
12년 전 조회 1,723
12년 전 조회 1,402
12년 전 조회 2,479
12년 전 조회 1,656
12년 전 조회 2,276
12년 전 조회 3,496
12년 전 조회 1,280
12년 전 조회 2,252
12년 전 조회 1,087
12년 전 조회 1,575
12년 전 조회 2,161
12년 전 조회 1,802
🐛 버그신고