/* 카카오 지도 API 활용하여 갬성카페 지도 사이트 만들기*/

정말 간단한거지만

전 api를 사용하는 방법을 몰랐죠,,,

 

카페를 너무 좋아해서 다 메모 해놓으며

약속 전 날 매일 메모와 지도

그리고 인스타에서 사람들이

어떤 사진을 찍었는지 보면서

 

카페를 다녔는데

너무 불편해서 만들게 되었어요!!

그래서 강제로 API도 알게 되었습니다 

๑'ٮ'๑

 

(카페에 진심인 녀자)

나중에 여행 갈 곳도 추가 할려고 이렇게 메뉴판으로

나눠 놓았어요

그리고 지역버튼을 누르면 드롭다운메뉴로 세부지역을 고르게

해 놓았습니다.

 

클릭하고 들어가 보면

모바일화면 / 컴퓨터 화면사이즈

대부분 모바일로

보는 사람이 많기 때문에

모바일 사이즈도 따로 설정 해줬어요.

 

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  #back, #list, #menu, #container, #wrap{
    width: 100%;
  }
  #map{
    margin-top: 5px;
    width: 90%;
    height: 300px;
  }
  #wrap{ //지도+목록 감싸는 박스
    display: block;
    margin-bottom: 100px;
  }
}

 

그리고 버튼을 누르면

해당하는 구 또는 지역에 해당하는 목록만 보여주도록

제이쿼리를 이용해 구현해 보았습니다

 

 

이렇게 선택하면

목록이 바뀌었어요

<script>

 $(document).ready(function () {
        $("#id명").click(function () {
          $("보여줄요소의 #id또는 .클래스명").show();
          $("#id/ .클래스명").hide();
          $("#id/ .클래스명").hide(); //숨길목록의 id와 클래스명
        });
      });

</script>

카페 목록을 추가할때 이미 사이즈나 flex 설정할때 이미 id로 써서 저는 class명도 추가해서 지역마다 동일한 클래스이름을 사용하여 기능을 구현했습니다.

 

+ 저기 인스타그램글씨를 누르면 해당 카페 사진이 보이도록 했어요!

 

 

링크 클릭!

http://silverline.dothome.co.kr/