June's Story

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

잡지식

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

Ikjunerd 2015.09.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
  • 그레이트 2015.10.01 09:43 신고 좋은 설명 감사합니다!! 제가 구현하려는 것과 거의 90% 이상 일치해서 코드 하나하나 뜯어보는 중입니다ㅋㅋ

    제가 다룰 줄 아는 언어가 루비 밖에 없어서 헤매는 중인데 조언 부탁드리겠습니다ㅠㅠ

    1. xml 대신 json을 사용하려면 어떻게 수정을 해야 할까요?
    2. 지도에 여러 개의 마커를 사용하려고 하는데, 반복문을 어떻게 짜야 할까요?


    감사합니다!
  • Favicon of http://blog.ikjunekim.net BlogIcon Ikjunerd 2015.10.01 13:36 신고 안녕하세요 ㅎ

    사실 루비랑 json 이 뭔지 잘 모르겠네요 ㅠ

    여러개의 마커를 넣으시려면 첨부한 xml 기준으로, xml에 있는 marker tag 개수대로 루프를 돌면 될것 같습니다.

    for (var i = 0; i<xmlDocMarker.getElementsByTagName("marker" ).length; i++){;} 이런식으로요 ㅎ



  • Favicon of http://blog.ikjunekim.net BlogIcon Ikjunerd 2015.10.01 11:17 신고 첨부한 코드도 이렇게 구현되어 있습니다. xml 파일에 위도 경도 값만 바꿔서 marker를 하나더 복사해서 붙여넣으시면 다른 두 지점에 마커가 생깁니다~ ㅎ
댓글쓰기 폼