구글맵 이벤트 - 클릭하면 메세지창출력

이벤트 리스너에서 클로저 사용하기

이벤트 리스너를 실행할 때는 비공개 및 영구 데이터를 모두 객체에 연결할 수 있다는 장점이 있습니다. 자바스크립트는 '비공개' 인스턴스 데이터는 지원하지 않지만 내부 함수가 외부 변수에 액세스할 수 있도록 해 주는 클로저를 지원합니다. 클로저를 사용하면 이벤트 리스너에서 이벤트가 발생한 객체에 속하지 않은 변수에 액세스할 수 있습니다.

다음 예에서는 이벤트 리스너에서 함수 클로저를 사용하여 마커 집합에 비밀 메시지를 할당합니다. 각 마커를 클릭하면 마커 자체에 포함되지 않은 비밀 메시지의 일부를 검토하게 됩니다.

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Add 5 markers to the map at random locations
  var southWest = new google.maps.LatLng(-31.203405,125.244141);
  var northEast = new google.maps.LatLng(-25.363882,131.044922);
  var bounds = new google.maps.LatLngBounds(southWest,northEast);
  map.fitBounds(bounds);
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 5; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
    var j = i + 1;
    marker.setTitle(j.toString());    // 커서 올렷을때 나오는 메세지
    attachSecretMessage(marker, i);
  }
}

// The five markers show a secret message when clicked
// but that message is not within the marker's instance data

function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new google.maps.InfoWindow(
      { content: message[number],
        size: new google.maps.Size(50,50)
      });
  google.maps.event.addListener(marker, 'click', function() {    // 이벤트 등록
    infowindow.open(map,marker);
  });
}

예 보기(event-closure.html)