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
'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