개탕 IT FACTORY

Google map 다중 마커표시 본문

프로그래밍/기타정리

Google map 다중 마커표시

rendar02 2018. 4. 15. 21:26
반응형

학교 개인 프로젝트중에 웹사이트에 구글맵 API를 연동해서 사용하는 경우가 생겼다...


사실 처음 사용하는것이고 몇몇 자료를 찾아보니 충분히 쉽고 누구나 할수 있게 구글에서도 한글문서화가 잘되어 있었다 


하지만 난관에 부딪힌건 바로 다중 마커표시인데 사실 다중 마커 표시가 그리 어려운것은 아니다 

    var locations = [

      ['명동', 37.563576, 126.983431],

      ['가로수길', 37.520300, 127.023008],

      ['광화문', 37.575268, 126.976896],

      ['남산', 37.550925, 126.990945],

      ['이태원', 37.540223, 126.994005]

    ];


이렇게 배열로 나열해서 맵에 뿌려준뒤 마커로 표시하는 방식인데 사실 이 소스를 구하는데 엄청난 시간이 걸렸다 ㅠㅠ 
사실 자바스크립트도 잘아는편도 아니여서 공부와 병행해가면서 하느라 코드 해석력이 떨어졌다 ....

또다시 어려움에 봉착한것이 바로 마커 클릭시 확대되는 이벤트 구축이다 
사실 다중마커표시는 여러사람이 구축해놓았고 그리 어려운 코드가 아니라 빠르게 내것으로 바꾸어 나갔는데 

이 클릭시 확대되는것은 사실 어려움이 있었다 구글참고 문헌에서도 확대 이벤트를 구축해 놓았지만 

1개의 값에대한것이고 다중 마커를 표시하는데 나는..... 코드 분석력도 없고 공부와 병행해나가면서 하느라 정말 힘들었다 

그러다 스택오버플로우(stackoverflow)를 통해 이와 관련된 소스를 발견하고 
해봤다

        marker.addListener('click', function() {

          map.setZoom(15);

          map.setCenter(this.getPosition());


솔직히 무슨코드인지 구글맵 이벤트관련 문헌을 참고해서 알았다 

addListener


addListener(instance, eventName, handler)


인스턴스값과 이벤트 이름, 핸들러 이렇게 구성되는데 

인스턴스값은 오브젝트값으로 이벤트이름은 string값 ,핸들러는 function값으로 반환된다고 써있다 


쉽게 지금 쓴 코드를 해석하자면 사실 인스턴스값은 생략된거고 클릭이라는 이벤트 이름에 function() 핸들러가 적용되었다


그렇게 해서 완성된 테스트용 소스다 실제 개인프로젝트에 들어갈건 더복잡해서 현재 걱정중이지만 ...일단 완성된것이 의의를


<!DOCTYPE html>

<html> 

<head> 

  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

  <title>Google Maps Multiple Markers</title> 

  <script src="http://maps.google.com/maps/api/js?sensor=false" 

          type="text/javascript"></script>

</head> 

<body>

  <div id="map" style="width: 500px; height: 400px;"></div>


  <script type="text/javascript">

    var locations = [

      ['명동', 37.563576, 126.983431],

      ['가로수길', 37.520300, 127.023008],

      ['광화문', 37.575268, 126.976896],

      ['남산', 37.550925, 126.990945],

      ['이태원', 37.540223, 126.994005]

    ];


    var map = new google.maps.Map(document.getElementById('map'), {

      zoom: 12,

      center: new google.maps.LatLng(37.549012, 126.988546),

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });


    var infowindow = new google.maps.InfoWindow();


    var marker, i;

    for (i = 0; i < locations.length; i++) {  

      marker = new google.maps.Marker({

        id:i,

        position: new google.maps.LatLng(locations[i][1], locations[i][2]),

        map: map

      });


      google.maps.event.addListener(marker, 'click', (function(marker, i) {

        return function() {

          infowindow.setContent(locations[i][0]);

          infowindow.open(map, marker);

        }

      })(marker, i));

      if(marker)

      {

        marker.addListener('click', function() {

          map.setZoom(15);

          map.setCenter(this.getPosition());

        });

        }

    }


  </script>

</body>

</html>


http://jsfiddle.net/sbnXE/170/


결과값은 일단 여기에다 올려두었다 



그런데 이제 문제는 한번더 눌르면 축소되는것을 만들려했는데 if와 else if를 사용해서 할려 했으나 


축소가 되질 않는다 ...... 아시는 분있으면 댓글 부탁드립니다 ㅠ

반응형

'프로그래밍 > 기타정리' 카테고리의 다른 글

DOM과 Virtual DOM에 대해서  (1) 2021.05.02
HTTP와 HTTPS의 차이점  (0) 2021.04.30
2020년회고와 2021년 다짐  (0) 2021.01.04
파이어베이스란? - 간단프로젝트 진행  (0) 2020.02.14
2019년 회고와 2020년 다짐  (0) 2020.01.23
'프로그래밍/기타정리' Related Articles more