네이버지도API 웹 적용하기

[네이버지도API 웹 적용하기]

1. 네이버 로그인 

2. https://developers.naver.com/products/map/ 접속 - 오픈 API 이용 신청 

3. 내용입력 (아래 사진 참고) : 본 게시글은 앱은 개발하지 않습니다 ^^;

- 빨간 네모칸 4개를 본인 사이트에 맞게 변경해주세요

4. 내 애플리케이션 - 생성한 애플리케이션 - 개요 - Client ID 복사

###### 이제부터는 소스코드에 적용해야할 부분입니다 ###### 

5. include 소스파일 

- 파란 부분에 복사한 클라이언트 아이디를 붙여넣습니다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=복사한 clientId 붙여넣기"></script>

6. html 부분에 지도가 들어갈 요소를 만들어주고 css로 가로, 세로값을 지정해줍니다. (디자인 레이아웃에 맞게 css 적용)

<div id='map'></div>

7. <script>코드 삽입 (지도가 들어가는 파일 내에 삽입해줍니다. 공통적용되는 script에 넣어주면 오류가 생길수 있습니다)

-   본 페이지에서는 지도 평면 + 지도 표시 스팟? 이라고 해야하나...  이걸 포함한 지도만드는 스크립트입니다. 

<script>

var HOME_PATH = window.HOME_PATH || '.';

var cityhall = new naver.maps.LatLng(37.3595704, 127.105399),

    map = new naver.maps.Map('map', {

        center: cityhall,

        zoom: 10

    }),

    marker = new naver.maps.Marker({

        map: map,

        position: cityhall

    });

var infowindow = new naver.maps.InfoWindow({

    maxWidth: 180,

    backgroundColor: "#eee",

    borderColor: "#2db400",

    borderWidth: 2,

    anchorSize: new naver.maps.Size(30, 30),

    anchorSkew: true,

    anchorColor: "#eee",

    pixelOffset: new naver.maps.Point(20, -20)

});

</script>

8. 좌표구하기

- 검색하다가 아주 좋은 링크를 발견했다 (문제 될시 삭제)

http://f.goodkiss.co.kr/naver/navermap.asp

[좌표구하기 링크 출처 : http://blog.goodkiss.co.kr/entry/%EC%A3%BC%EC%86%8C%EB%A1%9C-%EB%84%A4%EC%9D%B4%EB%B2%84%EC%A7%80%EB%8F%84-%EC%A2%8C%ED%91%9C%EA%B0%92-%EC%95%8C%EC%95%84%EB%82%B4%EA%B8%B0]