구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json )
메일로 어느분이 재미난 아이디어를 주셔서 만들어본 샘플인데 아마 가장 활용도가 높지 않을까 합니다.
기존 포스팅 했던 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 와 다른점은
Ajax+Json 를 통해 동적 마커 생성이 가능하다는 점과 GPS 연동되는 부분이 추가되었다는 점입니다.
10원짜리 팁인 마커 삭제 버튼도 넣었습니다.
Test Url : http://www.uhoon.co.kr/test/3300.html
기능 요약
- 구글맵 V3
- GPS 연동 현재 위치 표시
- 현재 위치 반경 원 그리기
- 현재 위치 마커를 제외한 마커 일괄 삭제
- Ajax를 통해 가져온 위치 데이터(json)를 동적으로 마커 생성.
간단히 말로 풀어서 기능설명을 하면
Ajax를 통한 데이터 연동으로 지정범위내에 위치한 데이터를 뽑아내서 동적 마커 생성이 되는 기능이기 때문에
광범위한 부분에서 응용이 가능하리라 봅니다.
기본적으로 현재 위치(GPS) 값을 읽어와서 마커(남자사람아이콘)를 생성하고 10km 원을 그려줍니다.
그리고 Ajax를 통해 가져온 위경도 값 / 말풍선 내용으로 마커를 생성합니다.
삭제 버튼을 눌러 현재 위치를 제외한 마커를 삭제하기도하고 마커읽어오기를 통해 다시 불러오기도 합니다.
(마커 생성시 현재 위경도값은 새로 읽어옵니다.)
샘플 예제에서 Ajax로 가져온 위경도 데이터는 임의의 데이터를 가져오도록 하였으나 현재위치 및 반경 범위를 계산한 데이터를 가져와서 사용하는 등
활용 방법은 정말 많을 것 같습니다!
