네이버 지도 오픈 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>
<!-- 네이버 지도 끝 -->
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6830 |
112211dd
|
11년 전 | 793 | |
| 6829 |
진짜다진짜가나타남
|
11년 전 | 1217 | |
| 6828 | 11년 전 | 825 | ||
| 6827 |
봉보로봉봉
|
11년 전 | 918 | |
| 6826 |
jinion
|
11년 전 | 829 | |
| 6825 | 11년 전 | 808 | ||
| 6824 |
yunkiri486
|
11년 전 | 726 | |
| 6823 |
2donggalbi
|
11년 전 | 855 | |
| 6822 | 11년 전 | 854 | ||
| 6821 | 11년 전 | 803 | ||
| 6820 | 11년 전 | 3108 | ||
| 6819 | 11년 전 | 1256 | ||
| 6818 | 11년 전 | 519 | ||
| 6817 |
|
11년 전 | 617 | |
| 6816 | 11년 전 | 2085 | ||
| 6815 | 11년 전 | 1217 | ||
| 6814 | 11년 전 | 872 | ||
| 6813 | 11년 전 | 615 | ||
| 6812 |
|
11년 전 | 989 | |
| 6811 | 11년 전 | 592 | ||
| 6810 | 11년 전 | 1543 | ||
| 6809 |
낚시가좋아
|
11년 전 | 1049 | |
| 6808 | 11년 전 | 448 | ||
| 6807 | 11년 전 | 779 | ||
| 6806 |
Unhappy
|
11년 전 | 1777 | |
| 6805 | 11년 전 | 1612 | ||
| 6804 | 11년 전 | 1130 | ||
| 6803 | 11년 전 | 579 | ||
| 6802 |
asdfg
|
11년 전 | 1147 | |
| 6801 |
아트귀농인
|
11년 전 | 505 | |
| 6800 | 11년 전 | 2561 | ||
| 6799 | 11년 전 | 1360 | ||
| 6798 | 11년 전 | 1474 | ||
| 6797 | 11년 전 | 631 | ||
| 6796 |
purple63
|
11년 전 | 432 | |
| 6795 | 11년 전 | 2639 | ||
| 6794 |
커네드커네드
|
11년 전 | 963 | |
| 6793 | 11년 전 | 410 | ||
| 6792 | 11년 전 | 2501 | ||
| 6791 | 11년 전 | 532 | ||
| 6790 | 11년 전 | 2264 | ||
| 6789 |
리아빌리티
|
11년 전 | 3102 | |
| 6788 | 11년 전 | 1346 | ||
| 6787 | 11년 전 | 681 | ||
| 6786 | 11년 전 | 392 | ||
| 6785 | 11년 전 | 723 | ||
| 6784 |
|
11년 전 | 853 | |
| 6783 | 11년 전 | 591 | ||
| 6782 | 11년 전 | 3659 | ||
| 6781 |
리아빌리티
|
11년 전 | 494 | |
| 6780 | 11년 전 | 541 | ||
| 6779 | 11년 전 | 487 | ||
| 6778 | 11년 전 | 4704 | ||
| 6777 |
바보온달123
|
11년 전 | 623 | |
| 6776 | 11년 전 | 933 | ||
| 6775 | 11년 전 | 737 | ||
| 6774 |
DANet
|
11년 전 | 642 | |
| 6773 | 11년 전 | 1561 | ||
| 6772 | 11년 전 | 1362 | ||
| 6771 | 11년 전 | 620 | ||
| 6770 | 11년 전 | 1161 | ||
| 6769 | 11년 전 | 960 | ||
| 6768 | 11년 전 | 693 | ||
| 6767 | 11년 전 | 589 | ||
| 6766 | 11년 전 | 1269 | ||
| 6765 |
크림나이트
|
11년 전 | 1002 | |
| 6764 | 11년 전 | 1555 | ||
| 6763 | 11년 전 | 2612 | ||
| 6762 | 11년 전 | 541 | ||
| 6761 |
|
11년 전 | 790 | |
| 6760 |
|
11년 전 | 718 | |
| 6759 | 11년 전 | 3353 | ||
| 6758 | 11년 전 | 1008 | ||
| 6757 | 11년 전 | 1271 | ||
| 6756 | 11년 전 | 895 | ||
| 6755 |
|
11년 전 | 570 | |
| 6754 |
|
11년 전 | 725 | |
| 6753 |
|
11년 전 | 1388 | |
| 6752 | 11년 전 | 609 | ||
| 6751 |
|
11년 전 | 653 | |
| 6750 |
|
11년 전 | 2028 | |
| 6749 | 11년 전 | 1219 | ||
| 6748 |
|
11년 전 | 1121 | |
| 6747 | 11년 전 | 1175 | ||
| 6746 | 11년 전 | 841 | ||
| 6745 |
|
11년 전 | 915 | |
| 6744 | 11년 전 | 853 | ||
| 6743 | 11년 전 | 1296 | ||
| 6742 | 11년 전 | 541 | ||
| 6741 |
Abilityarch
|
11년 전 | 612 | |
| 6740 | 11년 전 | 657 | ||
| 6739 |
leewin20
|
11년 전 | 1237 | |
| 6738 | 11년 전 | 511 | ||
| 6737 | 11년 전 | 1219 | ||
| 6736 | 11년 전 | 1262 | ||
| 6735 | 11년 전 | 549 | ||
| 6734 | 11년 전 | 1288 | ||
| 6733 |
RipperTNT
|
11년 전 | 1843 | |
| 6732 |
|
11년 전 | 1339 | |
| 6731 |
|
11년 전 | 1397 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기