네이버 지도 오픈 API를 통해서 간단히 만들어서 사이트에 적용시켜 보았습니다.
귀찮아서 간단히 만들어 보았습니다.
php 파일 -------
define(NAVER_MAP_KEY, "네이버오픈API에서 받은 키를 넣어주세요.");
function get_navermap_coods($p_str_addr="")
{
$int_x = 0;
$int_y = 0;
$str_addr = str_replace(" ", "", $p_str_addr);
// curl 이용해서 지도에 필요한 좌표를 취득
$dest_url = "http://openapi.map.naver.com/api/geocode.php?key=" . NAVER_MAP_KEY . "&encoding=utf-8&coord=LatLng&query=" . urlencode($str_addr);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $dest_url);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$str_result = curl_exec($ch);
curl_close($ch);
$obj_xml = simplexml_load_string($str_result);
$int_x = $obj_xml->item->point->x;
$int_y = $obj_xml->item->point->y;
return array($int_x, $int_y);
}
// 주소에서 좌표를 추출한다.
$str_addr = "서울시 강동구 길동 96-4";
list($int_x, $int_y) = get_navermap_coods($str_addr);
html 파일 --------------------------
<!-- 네이버 지도 스크립트는 상단에 위치하면 된다.-->
<script type="text/javascript">
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=<?= NAVER_MAP_KEY; ?>"></script>
<!-- 네이버 지도는 필요한 곳에 붙여넣으면 됩니다. -->
<div id = "naverMap" style="border:1px solid #000; width:431px; height:288px; margin:20px;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(<?= $int_y; ?>, <?= $int_x; ?>); // - 지도의 중심점을 나타내는 변수 선언
nhn.api.map.setDefaultPoint('LatLng'); // - 지도에서 기본적으로 사용하는 좌표계를 설정합니다.
var markerCount = 0;
oMap = new nhn.api.map.Map('naverMap', {
point : oPoint,
zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(431, 288)
});
var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
themeMapButton = new nhn.api.map.ThemeMapBtn(); // - 자전거지도 버튼 선언
mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언
var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({top:10, right:110}); // - 실시간 교통지도 버튼 위치 지정
mapTypeChangeButton.setPosition({top:10, left:50}); // - 지도 타입 버튼 위치 지정
themeMapButton.setPosition({top:10, right:10}); // - 자전거지도 버튼 위치 지정
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
oMap.addControl(themeMapButton);
oMap.addControl(mapTypeChangeButton);
oMap.addControl(trafficButton);
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);
var oMarker = new nhn.api.map.Marker(oIcon, { title : '<?= $str_hospital_name; ?>' }); //마커 생성
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oLabel.setVisible(true, oMarker); // 마커 라벨 보이기
</script>
<!-- 네이버 지도 끝 -->
귀찮아서 간단히 만들어 보았습니다.
php 파일 -------
define(NAVER_MAP_KEY, "네이버오픈API에서 받은 키를 넣어주세요.");
function get_navermap_coods($p_str_addr="")
{
$int_x = 0;
$int_y = 0;
$str_addr = str_replace(" ", "", $p_str_addr);
// curl 이용해서 지도에 필요한 좌표를 취득
$dest_url = "http://openapi.map.naver.com/api/geocode.php?key=" . NAVER_MAP_KEY . "&encoding=utf-8&coord=LatLng&query=" . urlencode($str_addr);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $dest_url);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$str_result = curl_exec($ch);
curl_close($ch);
$obj_xml = simplexml_load_string($str_result);
$int_x = $obj_xml->item->point->x;
$int_y = $obj_xml->item->point->y;
return array($int_x, $int_y);
}
// 주소에서 좌표를 추출한다.
$str_addr = "서울시 강동구 길동 96-4";
list($int_x, $int_y) = get_navermap_coods($str_addr);
html 파일 --------------------------
<!-- 네이버 지도 스크립트는 상단에 위치하면 된다.-->
<script type="text/javascript">
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=<?= NAVER_MAP_KEY; ?>"></script>
<!-- 네이버 지도는 필요한 곳에 붙여넣으면 됩니다. -->
<div id = "naverMap" style="border:1px solid #000; width:431px; height:288px; margin:20px;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(<?= $int_y; ?>, <?= $int_x; ?>); // - 지도의 중심점을 나타내는 변수 선언
nhn.api.map.setDefaultPoint('LatLng'); // - 지도에서 기본적으로 사용하는 좌표계를 설정합니다.
var markerCount = 0;
oMap = new nhn.api.map.Map('naverMap', {
point : oPoint,
zoom : 10, // - 초기 줌 레벨은 10으로 둔다.
enableWheelZoom : false,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(431, 288)
});
var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
themeMapButton = new nhn.api.map.ThemeMapBtn(); // - 자전거지도 버튼 선언
mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언
var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({top:10, right:110}); // - 실시간 교통지도 버튼 위치 지정
mapTypeChangeButton.setPosition({top:10, left:50}); // - 지도 타입 버튼 위치 지정
themeMapButton.setPosition({top:10, right:10}); // - 자전거지도 버튼 위치 지정
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
oMap.addControl(themeMapButton);
oMap.addControl(mapTypeChangeButton);
oMap.addControl(trafficButton);
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);
var oMarker = new nhn.api.map.Marker(oIcon, { title : '<?= $str_hospital_name; ?>' }); //마커 생성
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oLabel.setVisible(true, oMarker); // 마커 라벨 보이기
</script>
<!-- 네이버 지도 끝 -->
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6230 |
senseme
|
12년 전 | 1063 | |
| 6229 |
senseme
|
12년 전 | 1084 | |
| 6228 | 12년 전 | 4441 | ||
| 6227 |
senseme
|
12년 전 | 1500 | |
| 6226 |
senseme
|
12년 전 | 1645 | |
| 6225 | 12년 전 | 5502 | ||
| 6224 | 12년 전 | 3273 | ||
| 6223 |
kiplayer
|
12년 전 | 2143 | |
| 6222 | 12년 전 | 1306 | ||
| 6221 | 12년 전 | 3498 | ||
| 6220 | 12년 전 | 2522 | ||
| 6219 | 12년 전 | 2232 | ||
| 6218 |
senseme
|
12년 전 | 1847 | |
| 6217 |
senseme
|
12년 전 | 1540 | |
| 6216 |
senseme
|
12년 전 | 1531 | |
| 6215 |
senseme
|
12년 전 | 1287 | |
| 6214 | 12년 전 | 2399 | ||
| 6213 |
senseme
|
12년 전 | 1674 | |
| 6212 |
senseme
|
12년 전 | 1351 | |
| 6211 |
senseme
|
12년 전 | 2440 | |
| 6210 |
senseme
|
12년 전 | 1619 | |
| 6209 | 12년 전 | 2223 | ||
| 6208 | 12년 전 | 3446 | ||
| 6207 | 12년 전 | 1227 | ||
| 6206 |
senseme
|
12년 전 | 2201 | |
| 6205 | 12년 전 | 1042 | ||
| 6204 |
kiplayer
|
12년 전 | 1535 | |
| 6203 |
senseme
|
12년 전 | 2129 | |
| 6202 |
senseme
|
12년 전 | 1759 | |
| 6201 |
senseme
|
12년 전 | 4573 | |
| 6200 |
senseme
|
12년 전 | 2676 | |
| 6199 |
senseme
|
12년 전 | 2836 | |
| 6198 |
senseme
|
12년 전 | 1240 | |
| 6197 |
senseme
|
12년 전 | 8560 | |
| 6196 |
senseme
|
12년 전 | 3349 | |
| 6195 | 12년 전 | 1440 | ||
| 6194 |
|
12년 전 | 1296 | |
| 6193 |
senseme
|
12년 전 | 2698 | |
| 6192 |
senseme
|
12년 전 | 5372 | |
| 6191 |
senseme
|
12년 전 | 3419 | |
| 6190 | 12년 전 | 1349 | ||
| 6189 | 12년 전 | 13504 | ||
| 6188 |
웹디자인되고파
|
12년 전 | 1210 | |
| 6187 | 12년 전 | 627 | ||
| 6186 | 12년 전 | 3939 | ||
| 6185 | 12년 전 | 1478 | ||
| 6184 | 12년 전 | 9389 | ||
| 6183 | 12년 전 | 797 | ||
| 6182 |
senseme
|
12년 전 | 1244 | |
| 6181 |
senseme
|
12년 전 | 3228 | |
| 6180 |
senseme
|
12년 전 | 857 | |
| 6179 |
senseme
|
12년 전 | 1770 | |
| 6178 | 12년 전 | 3635 | ||
| 6177 | 12년 전 | 1067 | ||
| 6176 | 12년 전 | 960 | ||
| 6175 |
senseme
|
12년 전 | 5307 | |
| 6174 |
senseme
|
12년 전 | 1436 | |
| 6173 |
senseme
|
12년 전 | 757 | |
| 6172 |
senseme
|
12년 전 | 2747 | |
| 6171 |
senseme
|
12년 전 | 2491 | |
| 6170 |
senseme
|
12년 전 | 1507 | |
| 6169 |
senseme
|
12년 전 | 2935 | |
| 6168 |
senseme
|
12년 전 | 6537 | |
| 6167 | 12년 전 | 2142 | ||
| 6166 | 12년 전 | 748 | ||
| 6165 |
페이지팩트
|
12년 전 | 1915 | |
| 6164 |
네오soft
|
12년 전 | 1861 | |
| 6163 |
|
12년 전 | 2607 | |
| 6162 | 12년 전 | 592 | ||
| 6161 |
|
12년 전 | 1697 | |
| 6160 | 12년 전 | 777 | ||
| 6159 | 12년 전 | 1779 | ||
| 6158 |
|
12년 전 | 2686 | |
| 6157 |
sa2pan
|
12년 전 | 1249 | |
| 6156 | 12년 전 | 3895 | ||
| 6155 | 12년 전 | 9971 | ||
| 6154 | 12년 전 | 1129 | ||
| 6153 | 12년 전 | 2459 | ||
| 6152 |
생각보다몸이앞서다
|
12년 전 | 2130 | |
| 6151 | 12년 전 | 2980 | ||
| 6150 |
kiplayer
|
12년 전 | 6014 | |
| 6149 |
|
12년 전 | 2652 | |
| 6148 | 12년 전 | 2977 | ||
| 6147 |
hwang007
|
12년 전 | 955 | |
| 6146 |
aqqasdf
|
12년 전 | 774 | |
| 6145 | 12년 전 | 1869 | ||
| 6144 | 12년 전 | 5881 | ||
| 6143 |
smwkd
|
12년 전 | 1469 | |
| 6142 | 12년 전 | 4706 | ||
| 6141 | 12년 전 | 934 | ||
| 6140 | 12년 전 | 4103 | ||
| 6139 | 12년 전 | 1247 | ||
| 6138 | 12년 전 | 1098 | ||
| 6137 |
SugarSkull
|
12년 전 | 1684 | |
| 6136 | 12년 전 | 1314 | ||
| 6135 |
한번잘해보자
|
12년 전 | 565 | |
| 6134 |
프리랜서개발자
|
12년 전 | 546 | |
| 6133 |
basaria
|
12년 전 | 20449 | |
| 6132 | 12년 전 | 511 | ||
| 6131 | 12년 전 | 1090 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기