June's Story

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

프로그래밍

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

Ikjunerd 2015. 9. 14. 18:16

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는 없어도 됨


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

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

 

3 Comments
댓글쓰기 폼