네이버 지도 오픈 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>
<!-- 네이버 지도 끝 -->
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5930 | 12년 전 | 4640 | ||
| 5929 | 12년 전 | 7839 | ||
| 5928 | 12년 전 | 786 | ||
| 5927 | 12년 전 | 1414 | ||
| 5926 | 12년 전 | 1831 | ||
| 5925 |
김준수사랑
|
13년 전 | 1248 | |
| 5924 |
|
13년 전 | 2760 | |
| 5923 | 13년 전 | 959 | ||
| 5922 | 13년 전 | 1166 | ||
| 5921 | 13년 전 | 658 | ||
| 5920 | 13년 전 | 1180 | ||
| 5919 |
|
13년 전 | 1373 | |
| 5918 | 13년 전 | 12588 | ||
| 5917 |
프로프리랜서
|
13년 전 | 1099 | |
| 5916 |
프로프리랜서
|
13년 전 | 4624 | |
| 5915 |
프로프리랜서
|
13년 전 | 1604 | |
| 5914 |
프로프리랜서
|
13년 전 | 652 | |
| 5913 |
프로프리랜서
|
13년 전 | 932 | |
| 5912 |
프로프리랜서
|
13년 전 | 3745 | |
| 5911 |
프로프리랜서
|
13년 전 | 925 | |
| 5910 |
|
13년 전 | 4582 | |
| 5909 |
수야3019
|
13년 전 | 669 | |
| 5908 | 13년 전 | 834 | ||
| 5907 | 13년 전 | 1232 | ||
| 5906 | 13년 전 | 8757 | ||
| 5905 |
프로프리랜서
|
13년 전 | 1473 | |
| 5904 | 13년 전 | 2495 | ||
| 5903 | 13년 전 | 1652 | ||
| 5902 | 13년 전 | 1927 | ||
| 5901 | 13년 전 | 2013 | ||
| 5900 |
프로프리랜서
|
13년 전 | 1090 | |
| 5899 |
프로프리랜서
|
13년 전 | 1278 | |
| 5898 | 13년 전 | 17671 | ||
| 5897 | 13년 전 | 2333 | ||
| 5896 | 13년 전 | 4355 | ||
| 5895 | 13년 전 | 1690 | ||
| 5894 | 13년 전 | 2098 | ||
| 5893 |
프로프리랜서
|
13년 전 | 2156 | |
| 5892 | 13년 전 | 16039 | ||
| 5891 |
bitmaster
|
13년 전 | 1079 | |
| 5890 |
프로프리랜서
|
13년 전 | 946 | |
| 5889 |
|
13년 전 | 723 | |
| 5888 | 13년 전 | 1618 | ||
| 5887 |
|
13년 전 | 3199 | |
| 5886 | 13년 전 | 3448 | ||
| 5885 | 13년 전 | 2109 | ||
| 5884 | 13년 전 | 5651 | ||
| 5883 | 13년 전 | 2820 | ||
| 5882 | 13년 전 | 6028 | ||
| 5881 | 13년 전 | 1636 | ||
| 5880 | 13년 전 | 20715 | ||
| 5879 | 13년 전 | 903 | ||
| 5878 |
나의라임토마토
|
13년 전 | 1407 | |
| 5877 | 13년 전 | 16768 | ||
| 5876 |
maniAc
|
13년 전 | 2803 | |
| 5875 | 13년 전 | 1038 | ||
| 5874 | 13년 전 | 3735 | ||
| 5873 |
lainfox
|
13년 전 | 1182 | |
| 5872 | 13년 전 | 1345 | ||
| 5871 | 13년 전 | 795 | ||
| 5870 | 13년 전 | 2529 | ||
| 5869 |
AMDbest
|
13년 전 | 1512 | |
| 5868 |
한번잘해보자
|
13년 전 | 657 | |
| 5867 |
|
13년 전 | 914 | |
| 5866 | 13년 전 | 7490 | ||
| 5865 | 13년 전 | 2408 | ||
| 5864 | 13년 전 | 936 | ||
| 5863 | 13년 전 | 1308 | ||
| 5862 | 13년 전 | 2875 | ||
| 5861 | 13년 전 | 1028 | ||
| 5860 | 13년 전 | 19330 | ||
| 5859 | 13년 전 | 2940 | ||
| 5858 | 13년 전 | 2651 | ||
| 5857 | 13년 전 | 4823 | ||
| 5856 |
|
13년 전 | 1951 | |
| 5855 | 13년 전 | 816 | ||
| 5854 | 13년 전 | 1007 | ||
| 5853 | 13년 전 | 16104 | ||
| 5852 | 13년 전 | 824 | ||
| 5851 | 13년 전 | 2222 | ||
| 5850 | 13년 전 | 1773 | ||
| 5849 |
AMDbest
|
13년 전 | 1304 | |
| 5848 |
|
13년 전 | 1163 | |
| 5847 |
SeanLee
|
13년 전 | 1304 | |
| 5846 | 13년 전 | 23464 | ||
| 5845 | 13년 전 | 2651 | ||
| 5844 | 13년 전 | 28804 | ||
| 5843 |
|
13년 전 | 2206 | |
| 5842 | 13년 전 | 22517 | ||
| 5841 | 13년 전 | 5742 | ||
| 5840 |
Quincy
|
13년 전 | 933 | |
| 5839 | 13년 전 | 961 | ||
| 5838 | 13년 전 | 2820 | ||
| 5837 | 13년 전 | 1094 | ||
| 5836 | 13년 전 | 2313 | ||
| 5835 | 13년 전 | 1519 | ||
| 5834 | 13년 전 | 1501 | ||
| 5833 | 13년 전 | 6672 | ||
| 5832 | 13년 전 | 5213 | ||
| 5831 | 13년 전 | 1071 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기