주소지에 따라 네이버 api 지도 자동 표시하기
주소지에 따라 네이버api를 이용하여 지도를 표시하고 해당 지점에 마커를 표시해 주는 걸 만들어 보았습니다.
네이버api이용 지도표시 및 마커 표시는 Kwang Jae Lee님의 블로그글을 참조하였습니다.
제가 만들려고 하는 것의 포인트는 주소지에 따른 네이버 위,경도를 구하여 지도를 생성하고 마커를 표시해 주는데 있겠습니다.
먼저, https://dev.naver.com/openapi/register 에서 키값을 생성합니다.
아래 소스는 실제 적용될 페이지 소스입니다.
'mapContainer' 영역에 맵이 생성됩니다.
입력되는 주소지는 빈칸이 없도록 수정후 넣어주세요.
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=openapi키값"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
var addr="<?=$address2?>"; // 주소지를 넣어줍니다.
$.post("get_map.php","addr="+addr,function(data) {
var x=$(data).find('x').eq(0).text();
var y=$(data).find('y').eq(0).text();
var oPoint = new nhn.api.map.LatLng(y, x);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('mapContainer', {
center : oPoint,
level : 13, // - 초기 줌 레벨은 10이다.
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
activateRealtyMap : true,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(430, 230)
});
var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
mapZoom.setPosition({left:20, bottom:20}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom); // - 줌 컨트롤 추가.
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
// - Draggable Marker 의 경우 Icon 인자는 Sprite Icon이 된다.
// - 따라서 Sprite Icon 을 사용하기 위해 기본적으로 사용되는 값을 지정한다.
// - Sprite Icon 을 사용하기 위해서 상세한 내용은 레퍼런스 페이지의 nhn.api.map.SpriteIcon 객체를 참조하면 된다.
var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '마커이름' }); //마커 생성
oMarker1.setPoint(oPoint); //마커 표시할 좌표 선택
oMap.addOverlay(oMarker1); //마커를 지도위에 표현
var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기
});
});
//-->
</SCRIPT>
<div id='mapContainer' style='width:430px;height:230px;'></div>
위 소스에서 주소지를 가지고 위,경도를 구해오는 부분은 아래 부분입니다.
$.post("get_map.php","addr="+addr,function(data) {
var x=$(data).find('x').eq(0).text();
var y=$(data).find('y').eq(0).text();
위 소스는 get_map.php 파일로 addr 즉 주소지를 보낸다음 위,경도가 포함된 정보를 받아온 다음 위, 경도만 분리해 내는 것입니다.
get_map.php 파일 내용은 아래와 같습니다.
<?
include "./Snoopy.class.php";
$addr=urldecode($addr);
$url="http://openapi.map.naver.com/api/geocode.php?key=키값&encoding=utf-8&coord=latlng&query=".$addr;
$snoopy = new Snoopy;
$snoopy->fetch($url);
$content=$snoopy->results;
echo $content;
?>
Ajax로 파일내용을 불러오는건 같은 도메인내의 파일만 가능하여 직접 네이버주소를 불러오지 못하기 때문에 위와 같이 snoopy class를 이용하여 외부 페이지를 불러온 다음 그 내용을 Ajax로 불러오는 것입니다. 다른 용도로도 많이 이용이 가능한 부분입니다.
위 소스에서 coord 값으로 좌표체계를 지정해 줄 수 있습니다.
네이버 지도api에서 좌표체계는 다음과 같습니다.
nhn.api.map.LatLng : 위도/경도 좌표
[nLat: 30.3466388~30.3466388(?), Lng: 116.1252694~137.3551916]
nhn.api.map.TM128 : TM128 좌표
[nX: -550015~1301577, nY: -211785~1351112]
nhn.api.map.UTMK : UTMK 좌표
[nX: 90107~1949489, nY: 1192895~2745468]
'jQuery' 카테고리의 다른 글
| input button type의 활성화, 비활성화 (0) | 2012.05.30 |
|---|---|
| id element 삭제하기 (0) | 2012.05.24 |