구글맵-지도맵안에 있는 마커수 클러스터 및 사이드바 출력[2017_12_06수정] 정보
게시판 구글맵-지도맵안에 있는 마커수 클러스터 및 사이드바 출력[2017_12_06수정]관련링크
첨부파일
본문
안녕하세요.
개인적으로 구글맵이 필요하여 쉽게 가고자 정적인손님의 스킨도 사용해보고
피리님 맵도 구입해서 설치해 보고 했지만 두 분 다 훌륭한 프로그램이지만
제가 구상했던 것 하고는 딱히 맞지 않아 구글링 해서 만들어봤습니다.
사이드바를 원하시는 분들을 위해 정적인손님의 스킨 토대로
리스트 페이지만 커스텀하여 구글 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버전을 다운 받아 주세요.
19
댓글 전체
수고하셨습니다
혹시 사이드바의 제목을 ㄱ,ㄴ,ㄷ~ 이런식으로 정렬도 가능할까요
처음에 서울시청을 클릭하면 없어지고, 다음에 수원을 클릭하면 첨부 그림처럼 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