네이버 지도 오픈 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>
<!-- 네이버 지도 끝 -->
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7730 | 10년 전 | 1313 | ||
| 7729 | 10년 전 | 1167 | ||
| 7728 |
잘살아보자
|
10년 전 | 612 | |
| 7727 |
잘살아보자
|
10년 전 | 508 | |
| 7726 |
잘살아보자
|
10년 전 | 840 | |
| 7725 |
잘살아보자
|
10년 전 | 567 | |
| 7724 |
잘살아보자
|
10년 전 | 481 | |
| 7723 |
잘살아보자
|
10년 전 | 545 | |
| 7722 |
잘살아보자
|
10년 전 | 484 | |
| 7721 |
잘살아보자
|
10년 전 | 515 | |
| 7720 |
잘살아보자
|
10년 전 | 482 | |
| 7719 |
비긴어게인
|
10년 전 | 699 | |
| 7718 |
|
10년 전 | 2546 | |
| 7717 |
잘살아보자
|
10년 전 | 664 | |
| 7716 |
잘살아보자
|
10년 전 | 411 | |
| 7715 |
잘살아보자
|
10년 전 | 441 | |
| 7714 |
잘살아보자
|
10년 전 | 505 | |
| 7713 | 10년 전 | 1790 | ||
| 7712 | 10년 전 | 1728 | ||
| 7711 | 10년 전 | 1113 | ||
| 7710 | 10년 전 | 1407 | ||
| 7709 | 10년 전 | 1527 | ||
| 7708 | 10년 전 | 1466 | ||
| 7707 | 10년 전 | 865 | ||
| 7706 |
별지기천사
|
10년 전 | 580 | |
| 7705 | 10년 전 | 1084 | ||
| 7704 |
ICONdesignstudio
|
10년 전 | 634 | |
| 7703 | 10년 전 | 602 | ||
| 7702 |
|
10년 전 | 738 | |
| 7701 | 10년 전 | 1429 | ||
| 7700 | 10년 전 | 1116 | ||
| 7699 | 10년 전 | 586 | ||
| 7698 | 10년 전 | 1155 | ||
| 7697 | 10년 전 | 5180 | ||
| 7696 | 10년 전 | 669 | ||
| 7695 | 10년 전 | 1697 | ||
| 7694 | 10년 전 | 1074 | ||
| 7693 | 10년 전 | 1563 | ||
| 7692 | 10년 전 | 1309 | ||
| 7691 | 10년 전 | 836 | ||
| 7690 | 10년 전 | 1397 | ||
| 7689 | 10년 전 | 1025 | ||
| 7688 | 10년 전 | 628 | ||
| 7687 |
파랑새1597
|
10년 전 | 606 | |
| 7686 | 10년 전 | 863 | ||
| 7685 | 10년 전 | 1351 | ||
| 7684 | 10년 전 | 809 | ||
| 7683 | 10년 전 | 1115 | ||
| 7682 | 10년 전 | 1035 | ||
| 7681 | 10년 전 | 679 | ||
| 7680 | 10년 전 | 997 | ||
| 7679 | 10년 전 | 519 | ||
| 7678 | 10년 전 | 749 | ||
| 7677 | 10년 전 | 648 | ||
| 7676 |
|
10년 전 | 956 | |
| 7675 |
|
10년 전 | 1185 | |
| 7674 | 10년 전 | 1056 | ||
| 7673 | 10년 전 | 761 | ||
| 7672 | 10년 전 | 1102 | ||
| 7671 | 10년 전 | 910 | ||
| 7670 | 10년 전 | 673 | ||
| 7669 |
mashmellow
|
10년 전 | 1239 | |
| 7668 | 10년 전 | 726 | ||
| 7667 | 10년 전 | 1024 | ||
| 7666 |
senseme
|
10년 전 | 666 | |
| 7665 | 10년 전 | 522 | ||
| 7664 | 10년 전 | 1906 | ||
| 7663 |
mixx애교
|
10년 전 | 987 | |
| 7662 | 10년 전 | 1055 | ||
| 7661 |
hkhkah
|
10년 전 | 801 | |
| 7660 | 10년 전 | 1076 | ||
| 7659 |
커네드커네드
|
10년 전 | 943 | |
| 7658 |
바람돌이팡
|
10년 전 | 686 | |
| 7657 | 10년 전 | 1175 | ||
| 7656 | 10년 전 | 1586 | ||
| 7655 | 10년 전 | 1005 | ||
| 7654 |
개발짜증나
|
10년 전 | 866 | |
| 7653 |
네이비칼라
|
10년 전 | 888 | |
| 7652 |
밥먹고합시다
|
10년 전 | 816 | |
| 7651 |
플라이SINJI
|
10년 전 | 1518 | |
| 7650 |
개발짜증나
|
10년 전 | 1429 | |
| 7649 | 10년 전 | 458 | ||
| 7648 |
이미영ㅇㅇ
|
10년 전 | 876 | |
| 7647 | 10년 전 | 450 | ||
| 7646 | 10년 전 | 821 | ||
| 7645 | 10년 전 | 2330 | ||
| 7644 | 10년 전 | 826 | ||
| 7643 |
|
10년 전 | 2876 | |
| 7642 | 10년 전 | 1521 | ||
| 7641 | 10년 전 | 1148 | ||
| 7640 |
개발짜증나
|
10년 전 | 479 | |
| 7639 |
|
10년 전 | 822 | |
| 7638 |
개발짜증나
|
10년 전 | 1143 | |
| 7637 | 10년 전 | 1559 | ||
| 7636 | 10년 전 | 2920 | ||
| 7635 | 10년 전 | 1709 | ||
| 7634 | 10년 전 | 1896 | ||
| 7633 | 10년 전 | 2351 | ||
| 7632 | 10년 전 | 3959 | ||
| 7631 |
|
10년 전 | 1549 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기