구글맵-지도맵안에 있는 마커수 클러스터 및 사이드바 출력[2017_12_06수정] > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

구글맵-지도맵안에 있는 마커수 클러스터 및 사이드바 출력[2017_12_06수정] 정보

게시판 구글맵-지도맵안에 있는 마커수 클러스터 및 사이드바 출력[2017_12_06수정]

첨부파일

goolemap_0_1_2017_12_06수정.zip (54.8K) 177회 다운로드 2017-12-06 20:35:17 포인트 차감1
list.skin.php (19.0K) 15회 다운로드 2017-12-06 20:35:17 포인트 차감1

본문

안녕하세요.

개인적으로 구글맵이 필요하여 쉽게 가고자 정적인손님의 스킨도 사용해보고
피리님 맵도 구입해서 설치해 보고 했지만 두 분 다 훌륭한 프로그램이지만 
제가 구상했던 것 하고는 딱히 맞지 않아 구글링 해서 만들어봤습니다.

 

사이드바를 원하시는 분들을 위해  정적인손님의 스킨 토대로

리스트 페이지만 커스텀하여 구글 API 로 구현해 봤습니다.

 

현재 이 스킨은 실시간이 아니 db에서 바로 출력하는 형식으로 되어 있습니다.

실시간 쿼리 날리는것은 db 부담감이 있어 값을 바로 불려왔으나

ajax로 따로 배열을 만들어 출력하면 바로 실시간으로 변경가능합니다.

 

맵안에 있는 마커 수 만큼 사이드에 비동기적으로 show 하거나

hide 으로 구현되어 있습니다.

 

기본 로직

1.지도 맵 생성

2.DB에서 마커배열 생성

3.클러스터링

4.DB에서 사이드바 리스트 출력 

(2번 일차원 배열에서 바로 사이드바를 생성할 수 있으나

좀 더 쉽게  더보기 또는 무한 스크롤을 구현하기 위해 따로 분리 )

 

현재 이 스킨은 극히 제 주관적인 관점에서 정적인손님의 스킨을 현재위치와 페이징 되는 부분을

제외 시켜 limit 목록수 제한을 두지 않고 지도에 바로 뿌려 주도록 하였습니다.

또한 사이드바가 리스트를 대처하기 때문에 리스트 부분은 관리자만 볼 수 있도록 처리

했습니다. 


 

기본 골격이지만 어느정도 원하시는 형태로 가능할거라 생각하며

고수분들께서 좀 더 다듬어  멋진 스킨이 나오기를 기대해 봅니다. 

 

예제 링크 : http://hoouni.cafe24.com/bbs/board.php?bo_table=map

 

추신

정적인손님의 스킨을 동의없이 수정하여 재배포 하였습니다. 동의하지 않으실 경우

바로 삭제 처리 하도록 하겠습니다.

 

날씨가 무척 덥습니다. 시원한 하루 보내시고 마감하세요.

------------------------------------------------------------------------------

2017_12_06 수정사항

최근에 다시 보니 마젠토님이 말씀하신 오류에 대해 줌레벨에 대한 문제가 아니라

근본적인 문제가 있어서 다시 수정해서 올립니다.

 

이미 사옹하고 계시다면

-------------------------------------------201줄

            //인포내용 정보
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent("<div id='infobox'><h2>제목 : "+locations[i][0]+"</h2>"+locations[i][5]+"<p>"+locations[i][6]+"</p><p style='width: 100%;clear: both;'>등록일 :" +locations[i][7]+" / 조회수 : "+locations[i][8]+"<span class='btn'><a href='./board.php?bo_table=<?php echo $bo_table ?>&wr_id="+locations[i][9]+"'>상세보기</a></span></span></div>");                            //인포창 내용
                infowindow.open(map, marker);                                        //인포창 열기
                marker.setMap(map);                                                        //2017_12_06 추가
            }
            })(marker, i));

----------------------------------------------------234줄

//사이드바 클릭시 맵마커 이동
function myclick(i) {
   // map.setCenter(markers[i].getPosition()); 주석처리 해주세요
   // map.setZoom(9);                                            //지도줌레벨 

    google.maps.event.trigger(markers[i], "click");    //인포창 띄우기
}

-----------------------------------------------------

 

새로 받으실 분은 버전업된 0_2버전을 다운 받아 주세요.

https://sir.kr/g5_skin/17474

추천
19

댓글 전체


처음에 서울시청을 클릭하면 없어지고,  다음에 수원을 클릭하면 첨부 그림처럼 off로 가네요..
그리고  클릭시 가르키는 부분이 원 위치와 비슷한 곳에 위치했으면 좋을 것 같습니다.
늦둥이님 사이드바 제목 정렬을 하시려면 list.skin.php 이 파일 246줄에서
$sql = " Select wr_id,wr_subject From g5_write_$bo_table"; 이 부분을 아래와 같이 변경해 보세요
$sql = " Select wr_id,wr_subject From g5_write_$bo_table where 1 order by wr_subject asc";
=======================================================

마젠토님 방금 불여우 다운받아 설치해서 확인해 보니 저에겐 오류가 발생되지 않아 어떤 오류인지 모르겠네요. 버전은 54.0 이고요. 처움 클릭했을때 off 되는 문제나 클러스터안의 인포창 포인트 는 줌레벨을 적절하게 맞쳐 주시면 될 듯 합니다. list.skin.php 소스를 보시면 주석 처리로 설명을 해 놓았으니 참고하시면 될 듯 하네요.
와... 엄청나게 좋게 만드셧네요 +_+;;;
공부할 수 있는 소스 공개해주셔서 감사합니다~ ^^

조그만 바램이 있다면
예제나 소스상 구글키 현지화값을 넣어서 동해 나오게 했으면 해요.

다시한번 감사히 잘 공부하겠습니다.
이게 한글도메인으로 들어가면 지도가 한번 보였다가  죄송합니다. 문제가 발생했습니다.
Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요.
이렇게 나오는데 문제가 뭘까요?
초보적인 질문~~
Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요. ...는 어떻게 처리하면 되나요...ㅠ

list.skin.php 파일에서 구글키값 넣어도...안되네요..ㅠ

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp®ion=KR&key=받은키값넣었습니다~"></script
>
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT