Google Maps API를 이용한 사진게시판 코드

http://ikjunekim.net/gallery

 

Google Chart 에서 지원하는 Maps 차트(https://developers.google.com/chart/interactive/docs/gallery/map)를 이용해서 전에 만들었었는데 커스터마이징이 잘 안되서 Google Maps API(https://developers.google.com/maps/documentation/javascript/)를 이용해서 만듬

 

주요 기능:

• 사진의 위치 썸네일 제목 등등의 정보를 저장한 xml 읽어서 Google Map 상에 마커로 추가
• 추가된 마커를 클릭하면 썸네일 및 사진 설명을 적은 Infowindow 팝업
• *.kml로 저장된 GPS 경로 파일 overlay 하기

 

code.zip에 있는 파일들 한 폴더에 압축을 풀고, index.html 파일의 YOUR_API_KEY 부분에 Google api 사이트에서 받은 키를 넣으면 됨

(API Key 받기: https://developers.google.com/maps/documentation/javascript/)

 <SCRIPT src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> </SCRIPT>

아래 xml 파일 형식 으로 marker를 추가하면 되고, overlayer는 없어도 됨

<?xml version="1.0" encoding="UTF-8"?> <records> <marker id="마커아이디"> <flag>나라코드(optional)</flag> <desc>마커 설명</desc> <overLayer id = "오버레이어 아이디"> <data>kml 파일 전체 URL</data><label>Tour routes</label><type>route</type> </overLayer> <url>썸네일 그림 클릭 하면 이동할 주소</url> <thumbnail>썸네일 이미지 주소</thumbnail> <lat>마커 위도</lat><lng>마커 경도</lng> <portrait>가로사진은 width, 세로 사진은 height</portrait> </marker> </records>

[2016. 5. 20.] code.json.zip  <- Json버전 (압축 파일 안에 json 샘플있어요~)

[2016. 9. 23.] code.json.optimized.zip <- 마커 클릭할때 InfoWindow를 생성하도록 바꿈 (페이지 초기 로딩시 모든 썸네일 로딩되는 문제 수정)