[Django] html 태그의 mouseover 동작으로 Google map 컨트롤하기

개인 토이 프로젝트로 Google map 을 정말 조~금 다루어 보았는데 

- Google Map API를 통해 지도 로드하기

- DB에 저장된 위,경도를 이용해 지도에 Marker 찍기

- Marker 클릭 시 Infowindow 노출하기

- makerCluster 를 이용해 줌 아웃 시 클러스터 노출하기

생각보다 혼자 낑낑대며 해본게 꽤 많아 저것들도 천천히 블로그에 남겨볼 예정이다!

그리고 최근 개발 뽐뿌를 자극하던 것이 있었으니..

직방 - 원룸 매물 찾기

 

구글 - 음식점 위치 찾기

여러 서비스에서 위와 같은 html 태그에 mouseover 통한 지도 마커 이동 동작을 자주 볼 수 있는데

내가 만들어본것 중 가장 난이도가 있을 거 같았지만 구글님께 물어보면 된다.

참고로 자랑은 아니지만 JS (Java Script) 를 공부해본적도 없고 JS 언어 구조를 하나도 모른다 ㅇㅅaㅇ

그냥 파이썬으로 직접 사이트를 만들고 싶었고, 멋들어진 동작을 구현 하려면 JS나 Jquery가 필요하니 부족하지만 그냥 눈치껏 몸으로 부딪혀 보았다.

PinTravel(가제)

포스팅된 게시글 카드에 id을 값을 data-wonder 속성 값을 부여해준다.

<article class="card" id="{{ forloop.counter0 }}" data-wonder="{{ travel.id }}">

다음 wonderlinks 라는 변수에 data-wodner 속성 값을 받아온다.

var wonderlinks = $('[data-wonder]');

그리고 wonderlinks 변수에 filter 펑션을 사용하여 원하는 return 값을 정의해준다.

wonderlinks.filter(function(){

  return $(this).data('wonder') === markers[i][3];
  }).on('mouseover', (function(marker){
      return function(){
          map.panTo(marker.getPosition());
          $('.card').mouseover(function(){
              var number = $(this).attr("id");
          });
          $('.card').mouseout(function(){
              infowindow.close();
          });
      }
  })(marker));

  google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        map.panTo(marker.getPosition());
      }
  })(marker, i));

  google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
      return function() {
        infowindow.close();
      }
  })(marker, i));

지도에 marker를 for문을 통해 그려주고 있다보니 스크립트와 for문이 꼬여 완전하지 못하게 동작 하느라 꽤나 애를 먹었다..

개발 실력이 뛰어나지 못해서 코드의 대한 설명을 적을 순 없지만, 노력의 결과물을 어딘가에 기록해두고 싶어 이렇게나마 글을 적어봤습니다 🖐🏻