My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부




메일로 어느분이 재미난 아이디어를 주셔서 만들어본 샘플인데 아마 가장 활용도가 높지 않을까 합니다.


기존 포스팅 했던 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 와 다른점은 

Ajax+Json 를 통해 동적 마커 생성이 가능하다는 점과 GPS 연동되는 부분이 추가되었다는 점입니다.

10원짜리 팁인 마커 삭제 버튼도 넣었습니다.

 

Test Url : http://www.uhoon.co.kr/test/3300.html



기능 요약 


- 구글맵 V3
- GPS 연동 현재 위치 표시
- 현재 위치 반경 원 그리기
- 현재 위치 마커를 제외한 마커 일괄 삭제
- Ajax를 통해 가져온 위치 데이터(json)를 동적으로 마커 생성.



간단히 말로 풀어서 기능설명을 하면 


Ajax를 통한 데이터 연동으로 지정범위내에 위치한 데이터를 뽑아내서 동적 마커 생성이 되는 기능이기 때문에

광범위한 부분에서 응용이 가능하리라 봅니다.


기본적으로 현재 위치(GPS) 값을 읽어와서 마커(남자사람아이콘)를 생성하고 10km 원을 그려줍니다.

그리고 Ajax를 통해 가져온 위경도 값 / 말풍선 내용으로 마커를 생성합니다.


삭제 버튼을 눌러 현재 위치를 제외한 마커를 삭제하기도하고 마커읽어오기를 통해 다시 불러오기도 합니다.

(마커 생성시 현재 위경도값은 새로 읽어옵니다.)


샘플 예제에서 Ajax로 가져온 위경도 데이터는 임의의 데이터를 가져오도록 하였으나 현재위치 및 반경 범위를 계산한 데이터를 가져와서 사용하는 등 

활용 방법은 정말 많을 것 같습니다!



marker.png



  1. [2015/12/29] 구글맵 v3 infoBox by kay (1335)
  2. [2015/12/28] 구글맵 v3 단순 다중 마커 (배열이용) by kay (5661) *2
  3. [2015/02/05] 구글맵 마커 + 말풍선 - v3 by kay (2250) *2
  4. [2014/08/04] 구글맵 v3 맵상에 보여지는 마커만 생성하기 by kay (6324) *5
  5. [2014/04/21] Google 웹사이트 번역기 by kay (5048) *2
?
  • ?
    이용재 2014.07.18 09:54

    감사합니다!

  • ?
    학생 2014.07.31 13:18

    안녕하세요...

    위의 부분을 참조 해서 구현해보려고 합니다..

    한번에 많은 데이터를 뿌려주다보니 느린감이 없지않네요..

    혹시 보여주는 화면에서만 위치값을 뿌려준다고 해야할 경우..

    위의 스크립트를 어떻게 수정해야 할까요? 조언 부탁드립니다.

     

    var markerList = $.parseJSON(json);
       var listLen = markerList.length;
       for(var i=0; i<listLen; i++){
        var marker = new google.maps.Marker({
         position: new google.maps.LatLng(markerList[i].lat,markerList[i].lng),
         map: map,
         draggable: false,
         icon: markerList[i].icon,
         animation: google.maps.Animation.DROP,
         html: markerList[i].cont
        });
        markers.push(marker);

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker, "click", function () {
         infowindow.setContent(this.html);
         infowindow.open(map, this);
        });
       }

     

    어떻게 이벤트 처리를 해야 하는지....감이 안오네요..

  • ?
    kay 2014.08.04 08:56

    굳이 어렵게 생각하기보다 쉽게 생각하면 오히려 답은 금방 나옵니다.

    보여주는 화면안이라 함은 사각의 틀입니다. 네개의 점의 좌표를 알면 그 안에 있는지 밖에 있는지를 알 수 있구요.

    실제로는 대각선 개의 점 좌표만으로 구할 수 있습니다.


    http://www.uhoon.co.kr/GoogleAPI/3401 게시물을 참고해주세요^^


    지난주가 휴가여서 이제야 댓글을 달게 되었습니다.. 도움이 되셨으면 좋겠습니다.

  • ?
    학생 2014.08.04 10:56

    Kay 님 감사합니다....휴가 잘 다녀오셨어요?

    말씀해주신대로 잘 적용해볼께요.......

    Js를 DB로 변경해서 향후관리를 목적으로 정리를 했습니다.

    하다보니 궁금한것이 하나더 생겼는데...물어보면 죄송하겠지요?

    바쁘시겠지만 하나만 더 물어볼께요..^

     

    여러개의 데이터를 찾아서 보여줬어요..(화면상)

    내위치기준 영역이다보니 수도권지역에서는 좌표를 표현할 대상(지점or대리점) 정보가 많아서 표현이 좋은데...

    산간지방이나 외지인 지역에는 내기준 범위에서는 하나도 안보이는 케이스가 발생하였습니다.

     

    고민끝에 내기준으로 제일 가까운 지역의 위경도 정보는 DB를 통해 알고 있습니다 .

    특정(제일 가까운지점) 버튼을 클릭하면 해당정보있는 지역 Map화면과 그정보의 마커값을 함께 보여주려고 합니다.  

    (화면상 여러개가 있을수도 있고, 하나밖에 없을수도 있습니다.  특정버튼을 클릭했을때 해당정보만 마커를 보여주려는것이 관건이거든요..)

    위의 부분을 고민하는데...혹시 방법이 없을까요? 조언 부탁드릴께요...

     

    그리고 Kay님의 샘플 정말 유용하게 잘 사용하고 있습니다. 여러사람들에게 유익함을 준다는것 정말 감사할뿐이네요..^

    다시한번 감사드려요..

  • ?
    kay 2014.08.04 14:09

    범위내에 위치한 좌표인지 확인하는 부분이 DB 상에서 처리되는방법이 좋을것같습니다.

    그 수가 많지 않다면 Javascript 상에서 처리되어도 무방하나 분명 많아진다면 브라우저상에 부하가 걸려서 느리기 때문입니다.

    결과수에 따라 Zoom / Out 옵션을 적절히 사용하여 한번에 표시되는 마커들을 제한하는 것도 한가지 방법일것입니다.



    제가 이해한 내용이 맞는지 모르겠습니다;; 사실 요점파악을 못하는....ㅎㅎ;;


    * 데이터가 없는 경우에 현재 본인의 위치와 함께 보여질 것인지

       => 두 좌표간의 거리를 계산해서 줌/아웃 설정을 통해 두 지점을 보여주는 방법.

    * 가장 가까운 위치마커만 보여질것인지..

       => 기존에 생성된 모든 마커 삭제 후 해당 좌표만을 보여주는 방법.

  • ?
    학생 2014.08.05 11:42

    안녕하세요...감사합니다.

    제가 설명을 잘못했나 봅니다.ㅜㅜ

    죄송합니다.

     

    DB를 이용해 지점정보를 현재 보여주고 있습니다. 화면의 기준은 나를 기준으로 반경 5Km로 보여주는것이구요..

    헌데 구현하다보니 나를 기준으로 없는 지점도 있더라구요..나를 기준으로한 5Km 반경에 없는

    그럴결우 화면 아래 가장 가까운 지점찾기 버튼을 클릭하면 해당위치가 있는 지도화면이동하고 해당좌표의 마커도 동시에 열어줄수 있나해서요?

    이경우와

    다른경우는 많은 지점정보가 화면에 보여줄경우 가장 가까운 지점찾기 버튼을 클릭하면 많은 마커들중에 제일 가까운 지점의 마커을 열어줄수 있을까해서요...

     (기준좌표정보들은 삭제 안하구요..해당좌표의 마커만 정보를 표시해주려고 합니다.)

    같은의미지만 표현은 다르네요...

     

    DB로 처리하였기에 제일 가까운 위경도 및 해당지점의 ID값은 알고 있는 상태입니다...

     

    이럴경우 어떻게 처리하면 좋을지 조언을 구해요..^^ 감사합니다.

  • ?
    kay 2014.08.05 12:05

    두가지 기능이네요.


    1. 중심좌표 이동 ( 알고 있는 인근 좌표로 이동하도록.. )

       setCenter method 참고.


    2. 기본 마커 생성. 

       많은 예제들..


    가능합니다.

  • ?
    학생 2014.08.07 20:48

    Kay 님 감사해요.....

    알려주신대로 잘 해결했습니다..

    감사합니다...

    헌데..하나만요...혹시........

     

    화면이 뿌려줄때 마커값을 펼쳐지게 보여주려고 할때 어떻게 처리하나요?

     

    var marker = new google.maps.Marker({
         position: new google.maps.LatLng(lat,lng),
         map: map,
         draggable: false,
         icon: myIcon,
         html: "<b> "+_name+" </b>"

        });
        markers.push(marker);

        

        var infowindow = new google.maps.InfoWindow()
     
        google.maps.event.addListener(marker, "click", function () {
         infowindow.setContent(this.html);
         infowindow.open(map, this);
        });

     

    화면의 아이콘을 클릭했을때 html: "<b> "+_name+" </b>" 값이 보여지는데..

    클릭이 아니라 처음부터 지도 화면에 보여줄때 아이콘과 함께 html정보가 함께 보여주려고 하면..

    어떤 이벤트를 써야 하나요? 

    구현해도 안해도 무방하지만...깔끔하게 끝내려고 하다보니...

    조언 너무 감사합니다..

  • ?
    kay 2014.08.08 11:20

    요런식으로 검색해보시면 여러 방법들을 보실수 있습니다.

    https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#newwindow=1&q=google+map+infowindow+open

    스택오버플로에 아마 궁금해 하시는 대부분의 질답이 있습니다..^^


    기본적으로 사용하는 인포윈도 부분을 보시면 아래와 같이 클릭이벤트에 적용이 되어있습니다.  

    그렇다면!..  클릭했을때가 아니라 그냥 바로 실행되게 변경해볼까요? 기본 구글 개발자 사이트에 있는 샘플들을 이리저리 고쳐보시는것이 학습에 좋습니다..^^

    //  google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    //  });

    퐈이팅 하세요!

  • ?
    학생 2014.08.08 13:17

    mm 감사합니다..

    지금까지 google 검색했었는데..

    당연 클릭이벤트는 뺐었는데 this를 그냥 두고 했더니 반응이 없었거든요...

    역시 말씀하신대로 infowindow.open(map,marker); marker를 넣었더니 바로 되더라구요..

    감사합니다...많은 도움과 많은 조언을 배우네요.

    감사합니다.~

  • ?
    kay 2014.08.08 14:58

    도움이 되셨다니 기쁩니다. 저도 계속 삽질 중 입니다. 

    아직까지도 주먹구구식으로 이해하는것들이 많지만 조금씩 제대로(?) 이해하려고 노력중입니다..

    글로 정리하고 댓글달면서 저도 많이 배웁니다..감사합니다~


  • ?
    학생2 2016.12.26 17:31
    궁금한게 있어서 연락드립니다.
    현재위치가 아닌 자기가 원하는 좌표를 선택해서 원 반경을 보고싶으면 어떻게 해야하나요?
  • ?
    kay 2016.12.26 23:30

    // 현재 위치 기준 원 그리기
    var populationOptions = {
    strokeColor: '#000000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#808080',
    fillOpacity: 0.5,
    map: map,
    center: new google.maps.LatLng(latitude,longitude) ,
    radius: 10000
    };
    cityCircle = new google.maps.Circle(populationOptions);

    위 부분이 원을 그리기 위한 소스입니다.

    수정해야할 곳.
    >> 이곳에 위경도 값을 입력하면 됩니다.
    center: new google.maps.LatLng(latitude,longitude) ,


    즐프하세요~

  • ?
    학생2 2016.12.27 14:54
    하루종일 프로그래밍 하면서 궁금한게 있는데요 혹시 마커 클릭시 원을 그려주는 이벤트처리는 어떻게해야하나요?
  • ?
    kay 2016.12.27 15:25
    아래 부분을 별도 함수로 처리하여 마커 클릭이벤트에 주시면 됩니다.

    // 현재 위치 기준 원 그리기
    var populationOptions = {
    strokeColor: '#000000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#808080',
    fillOpacity: 0.5,
    map: map,
    center: new google.maps.LatLng(latitude,longitude) ,
    radius: 10000
    };
    cityCircle = new google.maps.Circle(populationOptions);
  • ?
    학생2 2016.12.27 15:44

    마커가 읽어오지를 못하는데 어떻게해야하나요..?

  • ?
    kay 2016.12.28 12:53

    Javascript 오류가 나는건가요? 상세 설명이 필요할 것같습니다..T^T


    설명이 어려우시면 일부 소스를 첨부해주시면 이해가 빠를것 같습니다.

  • ?
    widno 2017.05.24 18:51
    소슨는 어디에서 볼수있나요 ㅠ
  • ?
    kay 2017.05.30 17:37
    http://www.uhoon.co.kr/test/3300.html
    에서 소스보기 하시면 보이실꺼에요~
  • ?
    mjh 2017.08.15 21:06
    안녕하세요! 구글 맵을 사용해서 웹을 만들고있는데 수시로 위치가 변하는 객체를 지도에 마커로 표시해서 실시간 혹은 새로고침 없이 10초마다 지도상에 위치를 갱신해서 뿌려주고싶은데 글에 올려놓으신 ajax사용한 동적으로 마커 생성하는것이 제가 구현하는것과 같은기능인가요?
  • ?
    mjh 2017.08.15 21:06
    안녕하세요! 구글 맵을 사용해서 웹을 만들고있는데 수시로 위치가 변하는 객체를 지도에 마커로 표시해서 실시간 혹은 새로고침 없이 10초마다 지도상에 위치를 갱신해서 뿌려주고싶은데 글에 올려놓으신 ajax사용한 동적으로 마커 생성하는것이 제가 구현하는것과 같은기능인가요?
  • ?
    kay 2017.08.16 15:49
    네 동일 한 기능입니다.
    삭제와 불러오기를 반복적으로 실행하는것으로 구현 될것같습니다.
  • ?
    학생 2018.11.28 19:44
    안녕하세요! 혹시 저 반경범위를 마커가 벗어났을때 메시지를 출력하게 하고싶은데 어떤식으로 처리를 해야할지 조언을 좀 구해볼수있을까요??
  • ?
    kay 2018.12.04 11:07

    관련 웹 페이지가 있으니 참고해보시면 될것같습니다.


    https://code.i-harness.com/ko-kr/q/16ed7e



List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
20 map 구글맵 v3 infoBox file kay 2015.12.29 1335
19 map 구글맵 v3 단순 다중 마커 (배열이용) 2 file kay 2015.12.28 5661
18 map 구글맵 마커 + 말풍선 - v3 2 file kay 2015.02.05 2250
17 map 구글맵 v3 맵상에 보여지는 마커만 생성하기 5 file kay 2014.08.04 6324
» map 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 24 file kay 2014.07.17 13608
15 기타 Google 웹사이트 번역기 2 file kay 2014.04.21 5048
14 map Google Places API를 이용한 주변 지역 정보 검색 26 file kay 2013.10.18 16171
13 map GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 " 2 file kay 2013.08.28 4993
12 map 구글맵 API 적용범위 (Google Maps API Coverage) kay 2013.08.27 4761
11 map google 스트릿뷰 "Street View" file kay 2013.08.27 4458
10 map 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) file kay 2013.05.31 23356
9 map 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 13 file kay 2013.05.03 22836
8 map 모바일 웹 - 위치정보(GPS) + 마커 + 카톡 + 카스 연동 file kay 2013.04.24 9090
7 map 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 file kay 2013.04.22 13958
6 map geocode - 주소로 위경도 검색 v3 file kay 2013.04.21 7487
5 map 구글맵 마커 + 말풍선 - v2 kay 2013.02.06 10747
4 map geocode - 구글 맵 위경도 검색 v2 kay 2013.02.06 6949
3 Graph 막대 그래프 kay 2013.02.06 7619
2 Graph 선 + 막대 그래프 kay 2013.02.06 5878
1 Graph 선 그래프 file kay 2013.02.06 5971
Board Pagination Prev 1 Next
/ 1