안녕하세요.
개인적으로 구글맵이 필요하여 쉽게 가고자 정적인손님의 스킨도 사용해보고
피리님 맵도 구입해서 설치해 보고 했지만 두 분 다 훌륭한 프로그램이지만
제가 구상했던 것 하고는 딱히 맞지 않아 구글링 해서 만들어봤습니다.
사이드바를 원하시는 분들을 위해 정적인손님의 스킨 토대로
리스트 페이지만 커스텀하여 구글 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/4423 위의 마젠토님이 만드신거 배포 허락하셔서 아미나 버전으로만 수정했습니다.커뮤니티 활성화를 위해 댓글 5번 달면 받을수 있는 정도의...
아미나 맛집추천 스킨 원하시는 스킨 있으시면 카톡 으로 연락 주세요. 제작 해드리겠습니다 .
2017-06-23 구조 및 popup_source.php 내용을 대폭 변경했습니다.popup_pre6 ( https://sir.kr/g5_skin/1836 ) 을 사용하던 경우...
그누 5.3에서 약간의 오류가 발생하여 수정후 재업하겠습니다. 그누에 가입한지 벌써 10년이 넘었군요.. 매번 얻어 쓰기만 하다가 처음으로 스킨 한번 올려보려...
전에올린 가로 로그인이 width 넓이가 짤리는게 있어서 새로 작업해서 올립니다.설치방법은 skin/outlogin 폴더에 올리시고원하시는위치에 <?php echo outlogi...
안녕하세요. 개인적으로 구글맵이 필요하여 쉽게 가고자 정적인손님의 스킨도 사용해보고 피리님 맵도 구입해서 설치해 보고 했지만 두 분 다 훌륭한 프로그램이지만 제가 구상했던 것 하...
확인 해보니 누락된 파일이 있어 다시올려드립니다 누락된 파일 추가하여 올렸구요 댓글로 말씀하신대로 방문자를 기간별로 집계하는 부분은 개발중이니 조금만 기다려주시기 바랍니다! 또 다...
하단 표의 구성은 수정 하시면 될것 같고 차트 부분만 참고 하시면 될것 같아 올려봅니다.필요한 부분이나 요청 사항 있으시면 그 무엇이라도 무한 수용하도록 하겠습니다. ^^ 요구...
https://sir.kr/g5_skin/11619 이곳의 유투브동영상 최신글 스킨을 수정하였습니다. * 수정사항 : 1. 세로로 나오던 최신글을 가로로 변경. 2. PC용 =...
전체 최신글 페이지 스킨입니다. 메인페이지에서 사용하는 최신글 스킨과는 다릅니다. http://demo.sir.kr/gnuboard5/bbs/new.php 원본에 없는 댓글수, 새...
안녕하세요.이제 php 맛을 들린 초보 중의 상초보입니다.사실 여기 올릴 수준은 절대 아닌데 혹시나 필요한 분이 계실가 해서 한 번 올려 봅니다.적용을 시키면 위 처럼 나오게 됩니...
**와싸네 개별드롭다운 메뉴 프로그램** <개요>기존에 전체메뉴 드롭다운메뉴 스타일과 별도로 개별 드롭다운메뉴 스타일을 원하시는 분들이 계서서 만들어봤습니다.<설치방법>1. 첨...
댓글 30개
수고하셨습니다
혹시 사이드바의 제목을 ㄱ,ㄴ,ㄷ~ 이런식으로 정렬도 가능할까요
처음에 서울시청을 클릭하면 없어지고, 다음에 수원을 클릭하면 첨부 그림처럼 off로 가네요..
그리고 클릭시 가르키는 부분이 원 위치와 비슷한 곳에 위치했으면 좋을 것 같습니다.
$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 소스를 보시면 주석 처리로 설명을 해 놓았으니 참고하시면 될 듯 하네요.
공부할 수 있는 소스 공개해주셔서 감사합니다~ ^^
조그만 바램이 있다면
예제나 소스상 구글키 현지화값을 넣어서 동해 나오게 했으면 해요.
다시한번 감사히 잘 공부하겠습니다.
아..예제에.독도 표기.해.놓을께요.
주소를 찾지 못하였어요 ㅜㅜ:REQUEST_DENIED
Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요.
이렇게 나오는데 문제가 뭘까요?
Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요. ...는 어떻게 처리하면 되나요...ㅠ
list.skin.php 파일에서 구글키값 넣어도...안되네요..ㅠ
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp®ion=KR&key=받은키값넣었습니다~"></script
>
https://sir.kr/g5_skin/17474