반응형 OpenAPI/Javascript API4 [OpenAPI] 네이버 지도 API(4) - 데이터베이스 연동 지난 포스팅에서는 다음과 같이 마커와 정보창을 손수 추가해줬다. https://kimcoder.tistory.com/351 저번 예제에서는 마커를 2개만 썼기 때문에 큰 문제는 없었다. 그러나 나중에 마커의 수가 매우 많아지면, 코드의 수도 매우 길어지고 그만큼 유지 보수도 매우 힘들어질 것이다. 즉, 우리는 DB에서 데이터를 가져오는 기능을 수행하는 php파일을 작성하고, javascript의 ajax를 이용해서 해당 php파일에 접근할 것이다. 1. DB 확인 (Mysql) Mysql에 home테이블을 생성하고, (이름, 위도, 경도) 데이터 쌍을 가지는 레코드를 2개 추가했다. (phpMyAdmin 사용법) https://kimcoder.tistory.com/9 서버 호스팅 구매없이 DB외부접근 허.. 2021. 8. 13. [OpenAPI] 네이버 지도 API(3) - 마커와 정보창 표시 지도 API에서는 아래 이미지와 같이 특정 좌표에 마커와 정보창을 표시하는 기능을 제공한다. 이번 예제에서는 필자와 필자의 애인의 집 주소에 마커를 찍고, 마커 위에 누구의 집인지 정보창으로 표시해볼 것이다. 먼저 전체 소스 코드를 보여주고 각각의 내용을 설명해보도록 하겠다. 1. 전체 소스 코드 2. 소스 코드 부분 설명 1) HTML 부분 ... javascript에서 네이버 지도에서 제공하는 클래스들을 이용하기 위해, 태그로 maps.js 파일을 불러왔다. 그리고 지도는 웹 페이지의 전체 화면에 표시되게 하였다. vh는 웹 페이지의 높이를 100분의 1단위로 쪼갠 것이다. 2) Map 생성 map = new naver.maps.Map('map', { center: new naver.maps.LatL.. 2021. 8. 11. [OpenAPI] 네이버 지도 API(2) - javascript 튜토리얼 1. API 문서 페이지 소개 아래 링크는 javascript로 지도를 표현하는 방법들에 대해 안내하는 문서이다. https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io 해당 문서로 들어가서 Tutorials, Examples를 참고하며 학습하면 된다. 2. 기본 예제 1) 샘플 코드 [Tutorials -> 시작하기 -> Hello, World]에 있는 샘플 코드이다. 이 샘플 코드에서 필자가 밑줄친 부분에, 여러분이 생성한 애플리케이션의 .. 2021. 8. 10. [OpenAPI] 네이버 지도 API(1) - 내 애플리케이션 생성 Naver에서 제공하는 API들중 하나인 Maps API를 이용해보자. 이번 포스팅에서는 네이버 지도 서비스를 제공하기 위한 애플리케이션을 생성하고, 생성된 애플리케이션의 Client ID와 Client Secret을 확인하는 방법까지 다룰 것이다. 1. Naver Cloud Platform 접속 Naver Cloud Platform은 Naver API들을 제공하는 개발자 페이지다. 서비스를 이용하기 위해서 회원가입을 수행해주자. https://www.ncloud.com/ NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certif.. 2021. 8. 10. 이전 1 다음
