반응형

네이버 클라우드 콘솔 접속

Application 등록

  • https://console.ncloud.com/naver-service/application
  • 위 링크로 들어가서 Applicatoin 등록 버튼을 클릭
  • 약관 동의
  • Application 이름 설정 > Application 이름 입력
    • ex) demo
  • Service 선택 > Maps > 필요 항목 선택
    • ex) Web Dynamic Map
  • 서비스 환경 등록 > Web 서비스 URL에 URL 입력 > 추가
  • 최하단의 등록 버튼 클릭

등록된 Application 확인

  • https://console.ncloud.com/naver-service/application
  • 위 링크로 접속하여 생성된 Application의 인증 정보를 클릭하면 Client ID, Client Secret 등 상세 정보를 확인할 수 있다.
  • Client ID를 아래 예제에서 사용할 예정이므로 어딘가에 복사해둔다.

./index.html

  • YOUR_CLIENT_ID를 위에서 확인한 Client ID로 수정한다
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>간단한 지도 표시하기</title>
    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>

<script>
    var map = new naver.maps.Map('map', {
        center: new naver.maps.LatLng(37.3595704, 127.105399),
        zoom: 15
    });

    var marker = new naver.maps.Marker({
        position: new naver.maps.LatLng(37.3595704, 127.105399),
        map: map
    });

    var infowindow = new naver.maps.InfoWindow({
        content: "<div><h1>정자동 그린팩토리</h1></div>"
    });

    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>

./docker-compose.yml

version: "3.3"
services:
  nginx:
    container_name: naver-map-demo
    image: nginx:1.17.9
    environment:
      TZ: "Asia/Seoul"
    ports:
      - "80:80"
    volumes:
      - ./index.html:/usr/share/nginx/html/index.html

실행 후 테스트

docker-compose up -d
curl localhost

참고

반응형

'Development > ETC' 카테고리의 다른 글

[Kakao] 웹에서 카카오내비 앱 띄우기  (3) 2024.03.18
[Kakao] 웹으로 카카오 지도 연동하기  (0) 2023.12.24
[HTTP] Transfer-Encoding  (0) 2023.05.09
[Gradle] Multi-Project  (0) 2021.05.22
[PostgreSQL] 설치  (0) 2021.05.16

+ Recent posts

티스토리툴바