네이버 지도 오픈 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>
<!-- 네이버 지도 끝 -->
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7630 | 10년 전 | 633 | ||
| 7629 |
|
10년 전 | 2335 | |
| 7628 | 10년 전 | 768 | ||
| 7627 |
|
10년 전 | 991 | |
| 7626 |
|
10년 전 | 1754 | |
| 7625 | 10년 전 | 654 | ||
| 7624 | 10년 전 | 680 | ||
| 7623 |
|
10년 전 | 3000 | |
| 7622 | 10년 전 | 683 | ||
| 7621 |
leeleeleelee
|
10년 전 | 562 | |
| 7620 | 10년 전 | 524 | ||
| 7619 | 10년 전 | 446 | ||
| 7618 | 10년 전 | 991 | ||
| 7617 | 10년 전 | 707 | ||
| 7616 | 10년 전 | 603 | ||
| 7615 | 10년 전 | 698 | ||
| 7614 | 10년 전 | 1204 | ||
| 7613 |
|
10년 전 | 2043 | |
| 7612 | 10년 전 | 1112 | ||
| 7611 | 10년 전 | 1378 | ||
| 7610 |
|
10년 전 | 1871 | |
| 7609 |
|
10년 전 | 1283 | |
| 7608 |
mwdkim
|
10년 전 | 1090 | |
| 7607 |
|
10년 전 | 1017 | |
| 7606 |
mwdkim
|
10년 전 | 3895 | |
| 7605 | 10년 전 | 661 | ||
| 7604 | 10년 전 | 999 | ||
| 7603 | 10년 전 | 1624 | ||
| 7602 |
|
10년 전 | 1040 | |
| 7601 |
AniNest
|
10년 전 | 2755 | |
| 7600 |
port443
|
10년 전 | 987 | |
| 7599 | 10년 전 | 914 | ||
| 7598 | 10년 전 | 988 | ||
| 7597 | 10년 전 | 4550 | ||
| 7596 |
SeungYeon
|
10년 전 | 863 | |
| 7595 |
untitled
|
10년 전 | 2383 | |
| 7594 |
프로그래머7
|
10년 전 | 1699 | |
| 7593 |
untitled
|
10년 전 | 2337 | |
| 7592 |
untitled
|
10년 전 | 1905 | |
| 7591 |
untitled
|
10년 전 | 2646 | |
| 7590 |
아리마2001
|
10년 전 | 817 | |
| 7589 | 10년 전 | 1075 | ||
| 7588 |
|
10년 전 | 2887 | |
| 7587 | 10년 전 | 1269 | ||
| 7586 | 10년 전 | 630 | ||
| 7585 | 10년 전 | 1650 | ||
| 7584 | 10년 전 | 1385 | ||
| 7583 |
leeleeleelee
|
10년 전 | 1117 | |
| 7582 |
|
10년 전 | 1068 | |
| 7581 | 10년 전 | 1302 | ||
| 7580 | 10년 전 | 941 | ||
| 7579 |
|
10년 전 | 577 | |
| 7578 | 10년 전 | 1385 | ||
| 7577 |
|
10년 전 | 1849 | |
| 7576 | 10년 전 | 1363 | ||
| 7575 |
멋진남자임
|
10년 전 | 1443 | |
| 7574 | 10년 전 | 2081 | ||
| 7573 | 10년 전 | 3212 | ||
| 7572 | 10년 전 | 744 | ||
| 7571 |
|
10년 전 | 770 | |
| 7570 |
|
10년 전 | 1282 | |
| 7569 | 10년 전 | 1516 | ||
| 7568 |
this1mg
|
10년 전 | 1020 | |
| 7567 |
|
10년 전 | 727 | |
| 7566 | 10년 전 | 887 | ||
| 7565 |
Angel하늘
|
10년 전 | 955 | |
| 7564 |
seoldi
|
10년 전 | 1194 | |
| 7563 |
|
10년 전 | 1344 | |
| 7562 |
멋진남자임
|
10년 전 | 2041 | |
| 7561 | 10년 전 | 679 | ||
| 7560 |
leeleeleelee
|
10년 전 | 874 | |
| 7559 | 10년 전 | 5006 | ||
| 7558 |
RinaP
|
10년 전 | 753 | |
| 7557 |
|
10년 전 | 1216 | |
| 7556 | 10년 전 | 1167 | ||
| 7555 |
hyohyojj1234
|
10년 전 | 1631 | |
| 7554 | 10년 전 | 1066 | ||
| 7553 |
senseme
|
10년 전 | 1319 | |
| 7552 |
ehdltdoit
|
10년 전 | 1412 | |
| 7551 |
|
10년 전 | 1790 | |
| 7550 |
leeleeleelee
|
10년 전 | 1553 | |
| 7549 | 10년 전 | 2391 | ||
| 7548 | 10년 전 | 1812 | ||
| 7547 |
멋진남자임
|
10년 전 | 1919 | |
| 7546 | 10년 전 | 964 | ||
| 7545 |
ILMare1003
|
10년 전 | 1252 | |
| 7544 |
|
10년 전 | 1209 | |
| 7543 | 10년 전 | 860 | ||
| 7542 | 10년 전 | 633 | ||
| 7541 |
울라라라우
|
10년 전 | 844 | |
| 7540 | 10년 전 | 1575 | ||
| 7539 | 10년 전 | 893 | ||
| 7538 |
|
10년 전 | 1805 | |
| 7537 | 10년 전 | 3580 | ||
| 7536 |
Gaumi
|
10년 전 | 1376 | |
| 7535 |
프로그램은어려워
|
10년 전 | 1241 | |
| 7534 |
senseme
|
10년 전 | 1189 | |
| 7533 | 10년 전 | 1164 | ||
| 7532 | 10년 전 | 830 | ||
| 7531 | 10년 전 | 2024 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기