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,605
12년 전 조회 1,230
12년 전 조회 2,850
12년 전 조회 2,306
12년 전 조회 523
12년 전 조회 2,984
12년 전 조회 1,427
12년 전 조회 1,338
12년 전 조회 1,395
12년 전 조회 3,318
12년 전 조회 2,087
12년 전 조회 3,746
12년 전 조회 8,622
12년 전 조회 4,229
12년 전 조회 3,793
12년 전 조회 1,404
12년 전 조회 1,478
12년 전 조회 3,190
12년 전 조회 4,031
12년 전 조회 4,435
12년 전 조회 1,654
12년 전 조회 1,340
12년 전 조회 924
12년 전 조회 1,026
12년 전 조회 2,762
12년 전 조회 2,777
12년 전 조회 1,304
12년 전 조회 2,840
12년 전 조회 1,324
12년 전 조회 8,505
12년 전 조회 1,553
12년 전 조회 3,815
12년 전 조회 6,430
12년 전 조회 1,613
12년 전 조회 2,874
12년 전 조회 629
12년 전 조회 1,339
12년 전 조회 1,199
12년 전 조회 1,364
12년 전 조회 3,359
12년 전 조회 1,136
12년 전 조회 1,857
12년 전 조회 1,295
12년 전 조회 948
12년 전 조회 1,431
12년 전 조회 2,142
12년 전 조회 1,425
12년 전 조회 1,312
12년 전 조회 1,837
12년 전 조회 1.5만
12년 전 조회 1,106
12년 전 조회 914
12년 전 조회 2,754
12년 전 조회 9,006
12년 전 조회 1,320
12년 전 조회 1,211
12년 전 조회 1,679
12년 전 조회 1,183
12년 전 조회 1,322
12년 전 조회 3,596
12년 전 조회 1,503
12년 전 조회 2,176
12년 전 조회 1,194
12년 전 조회 1,346
12년 전 조회 3,069
12년 전 조회 916
12년 전 조회 1,389
12년 전 조회 1,656
12년 전 조회 2,078
12년 전 조회 2,176
12년 전 조회 2,608
12년 전 조회 1,096
12년 전 조회 1,123
12년 전 조회 4,487
12년 전 조회 1,537
12년 전 조회 1,684
12년 전 조회 5,543
12년 전 조회 3,300
12년 전 조회 2,180
12년 전 조회 1,340
12년 전 조회 3,524
12년 전 조회 2,565
12년 전 조회 2,258
12년 전 조회 1,880
12년 전 조회 1,580
12년 전 조회 1,580
12년 전 조회 1,326
12년 전 조회 2,445
12년 전 조회 1,714
12년 전 조회 1,398
12년 전 조회 2,473
12년 전 조회 1,650
12년 전 조회 2,266
12년 전 조회 3,487
12년 전 조회 1,270
12년 전 조회 2,246
12년 전 조회 1,075
12년 전 조회 1,569
12년 전 조회 2,154
12년 전 조회 1,798
🐛 버그신고