PHP 네이버 주소 좌표변환 및 Web 지도 표시 예제

Web 프로그램/PHP 응용 및 활용 2020. 7. 13. 20:36

728x90

네이버 지오코더 API 를 이용하여 주소 → 위치좌표를 반환하는 PHP 코드와 네이버 지도상에 마커를 보여주는 Javascript 구현 코드 예제다.

IP주소 및 경로 등록이 되어있어야만 Naver Map 이 화면에 보여지며, Naver Cloud 신청에 대한 사항은 https://link2me.tistory.com/1832 게시글을 참조하면 된다.

주소 → 위치좌표 변환을 위해서는 Naver Cloud 에서 Geocorder API가 신청되어 있어야 한다.

Web 브라우저에 보이기 위해서는 Web Dynamic Map 이 신청되어 있어야 한다.

<?php
//error_reporting(0);
//error_reporting(E_ALL);
//ini_set("display_errors", 1);

function getNaverGeocode($addr) {
    $addr = urlencode($addr);
    $url = "https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode?query=".$addr;
    $headers = array();
    $headers[] ="X-NCP-APIGW-API-KEY-ID:xz06ez230a";
    $headers[] ="X-NCP-APIGW-API-KEY:e0A5km9e7Rh5S9QOkr1TRfa4NW8MaDblKAXcrQXL";

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
}

$shop_name = "광제당한의원";
$addr = "경기도 안산시 단원구 선부광장1로 56";
$geo = getNaverGeocode($addr);
$data = json_decode($geo,1);

$map_y_point = $data['addresses'][0]['x']; // x 좌표값과 y좌표값이 바뀌어서 출력됨
$map_x_point = $data['addresses'][0]['y'];

$lat = $map_x_point;
$lng = $map_y_point;
?>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xz06ez230a&submodules=geocoder"></script>

</head>
<body>
<div class="container-fluid text-center">
    <div class="row">
        <div class="col-md-12">
            <div class="content" id="content">
                <div id="map" style="width:100%;height:450px;"></div>
            </div>
        </div>
    </div>
</div>

<script>
var lat = "<?php echo $lat;?>";
var lng = "<?php echo $lng;?>";
var shop_name = "<?php echo $shop_name;?>";
var addr = "<?php echo $addr;?>";
var HOME_PATH = window.HOME_PATH || '.';

var map = new naver.maps.Map('map', {
   useStyleMap: true,
   center: new naver.maps.LatLng(lat, lng), //지도의 초기 중심 좌표
   zoom: 15, //지도의 초기 줌 레벨
   minZoom: 7, //지도의 최소 줌 레벨
   zoomControlOptions : { //줌 컨트롤의 옵션
       position : naver.maps.Position.TOP_RIGHT
   },
   mapTypeControl : true
});

// 마커 표시
var marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(lat, lng),
    map: map
});

var contentString = [
        '<div style="text-align:center;padding-left:15px;padding-right:15px;padding-top:5px;">',
        '   <h4>'+shop_name+'</h4>',
        '   <p>'+addr+'<br />',
        '   </p>',
        '</div>'
    ].join('');

var infowindow = new naver.maps.InfoWindow({
    content: contentString
});

naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

infowindow.open(map, marker);
</script>
</body>
</html>

참고사이트

https://github.com/navermaps/maps.js/tree/master/examples/map

https://navermaps.github.io/maps.js/docs/tutorial-3-geocoder-geocoding.example.html

https://navermaps.github.io/android-map-sdk/guide-ko/0.html

https://sir.kr/g5_tip/10880

728x90

저작자표시 비영리

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

News API 직접 연동 불가를 해결하는 방법 (0)	2020.11.09
SMS OTP 인증 구현(설계) (0)	2020.09.10
PhpSpreadsheet 설치 및 사용예제 (0)	2020.07.07
PHP 스팸방지 캡차 오픈소스 활용 코드 (0)	2020.03.02
전화번호 임시번호로 일괄 변경하기 (0)	2019.09.21

Link2Me