네이버 지도 오픈 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>
<!-- 네이버 지도 끝 -->
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6930 |
SOFTA
|
11년 전 | 5984 | |
| 6929 |
|
11년 전 | 1596 | |
| 6928 | 11년 전 | 1756 | ||
| 6927 | 11년 전 | 1779 | ||
| 6926 | 11년 전 | 1884 | ||
| 6925 | 11년 전 | 2275 | ||
| 6924 | 11년 전 | 3874 | ||
| 6923 | 11년 전 | 2273 | ||
| 6922 |
level999
|
11년 전 | 1041 | |
| 6921 | 11년 전 | 822 | ||
| 6920 | 11년 전 | 954 | ||
| 6919 | 11년 전 | 1071 | ||
| 6918 | 11년 전 | 1311 | ||
| 6917 | 11년 전 | 15428 | ||
| 6916 | 11년 전 | 1426 | ||
| 6915 | 11년 전 | 586 | ||
| 6914 | 11년 전 | 616 | ||
| 6913 | 11년 전 | 880 | ||
| 6912 | 11년 전 | 3126 | ||
| 6911 |
사랑해요79
|
11년 전 | 966 | |
| 6910 | 11년 전 | 745 | ||
| 6909 | 11년 전 | 781 | ||
| 6908 | 11년 전 | 644 | ||
| 6907 | 11년 전 | 832 | ||
| 6906 | 11년 전 | 1587 | ||
| 6905 | 11년 전 | 569 | ||
| 6904 | 11년 전 | 1010 | ||
| 6903 | 11년 전 | 1676 | ||
| 6902 |
2donggalbi
|
11년 전 | 516 | |
| 6901 | 11년 전 | 1395 | ||
| 6900 | 11년 전 | 720 | ||
| 6899 | 11년 전 | 861 | ||
| 6898 |
열라뽕똬이
|
11년 전 | 1311 | |
| 6897 |
this1mg
|
11년 전 | 1610 | |
| 6896 |
sbdossb
|
11년 전 | 576 | |
| 6895 |
봉보로봉봉
|
11년 전 | 1154 | |
| 6894 |
똘똘이스머츠
|
11년 전 | 497 | |
| 6893 |
네이비컬러
|
11년 전 | 3639 | |
| 6892 | 11년 전 | 1077 | ||
| 6891 |
네이비컬러
|
11년 전 | 1319 | |
| 6890 | 11년 전 | 1140 | ||
| 6889 | 11년 전 | 589 | ||
| 6888 | 11년 전 | 725 | ||
| 6887 | 11년 전 | 615 | ||
| 6886 | 11년 전 | 5058 | ||
| 6885 | 11년 전 | 556 | ||
| 6884 |
asfasdfd235
|
11년 전 | 583 | |
| 6883 | 11년 전 | 3037 | ||
| 6882 | 11년 전 | 922 | ||
| 6881 | 11년 전 | 4429 | ||
| 6880 | 11년 전 | 1815 | ||
| 6879 |
퍼블리셔지노군
|
11년 전 | 2627 | |
| 6878 | 11년 전 | 558 | ||
| 6877 | 11년 전 | 581 | ||
| 6876 | 11년 전 | 1445 | ||
| 6875 | 11년 전 | 629 | ||
| 6874 | 11년 전 | 1603 | ||
| 6873 | 11년 전 | 1606 | ||
| 6872 | 11년 전 | 4460 | ||
| 6871 |
Abilityarch
|
11년 전 | 965 | |
| 6870 | 11년 전 | 2128 | ||
| 6869 | 11년 전 | 1410 | ||
| 6868 | 11년 전 | 1454 | ||
| 6867 | 11년 전 | 1527 | ||
| 6866 | 11년 전 | 744 | ||
| 6865 | 11년 전 | 1617 | ||
| 6864 | 11년 전 | 475 | ||
| 6863 | 11년 전 | 3751 | ||
| 6862 | 11년 전 | 1849 | ||
| 6861 | 11년 전 | 1647 | ||
| 6860 | 11년 전 | 1305 | ||
| 6859 |
cityman
|
11년 전 | 6814 | |
| 6858 | 11년 전 | 1270 | ||
| 6857 |
의정부아줌마
|
11년 전 | 869 | |
| 6856 | 11년 전 | 2375 | ||
| 6855 | 11년 전 | 1700 | ||
| 6854 | 11년 전 | 829 | ||
| 6853 | 11년 전 | 1210 | ||
| 6852 | 11년 전 | 2599 | ||
| 6851 | 11년 전 | 1974 | ||
| 6850 | 11년 전 | 1796 | ||
| 6849 | 11년 전 | 2085 | ||
| 6848 | 11년 전 | 2366 | ||
| 6847 | 11년 전 | 3142 | ||
| 6846 | 11년 전 | 2720 | ||
| 6845 | 11년 전 | 2800 | ||
| 6844 | 11년 전 | 3523 | ||
| 6843 | 11년 전 | 3265 | ||
| 6842 |
아트291
|
11년 전 | 694 | |
| 6841 | 11년 전 | 4171 | ||
| 6840 | 11년 전 | 5187 | ||
| 6839 | 11년 전 | 894 | ||
| 6838 |
|
11년 전 | 2097 | |
| 6837 | 11년 전 | 1278 | ||
| 6836 |
netdf
|
11년 전 | 614 | |
| 6835 |
|
11년 전 | 1011 | |
| 6834 | 11년 전 | 674 | ||
| 6833 |
|
11년 전 | 2687 | |
| 6832 |
울산굿모닝
|
11년 전 | 1663 | |
| 6831 |
|
11년 전 | 670 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기