[GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (2)

[GoogleMap] 구글맵에 마커(Marker)를 추가해 보자 (1)에서 기본적인 마커 사용법에 대해서 알아 보았는데,

우리동네 교통사고 다발지역 서비스를 위해서는 아직 부족하다.

 

• 교통사고 다발지역이 한 곳이라면 충분하겠지만 아쉽게도 그렇지가 않다. 그래서 하나의 맵에 마커를 여러 개를 보여줘야 하며,

• 그 사고지역의 교통사고 상세 정보를 보여주기 위해서는 개별 마커를 클릭했을 때 팝업을 띄울 수 있으면 좋겠다.

여러개 마커 보여주기

마커를 생성하는 방법이 Maker 객체를 생성하고 그 객체를 Map에 전달하는 방식이 아니고

그 반대로 Map을 먼저 생성한 다음에 Maker객체 생성할 때 Map 객체를 전달하는 방식이기 때문에,

여러개 마커를 보여주기 위해서는 마찬가지로 Map객체를 먼저 생성하고

필요한만큼 Marker객체를 생성해 주기만 하면 된다. 각각의 객체를 생성할 때 Map 객체는 그저 전달만 하면 된다.

 

우리동네 교통사고 다발지역 서비스를 만들 때 사용했던 코드를 보면 그냥 루프문이 전부다.

function drawMakers(totalItems) {
	var myIcon = new google.maps.MarkerImage("./img/caraccident.png");
	
	for (var i = 0; i < totalItems.length; i++) {  
		var marker = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(totalItems[i].la_crd, totalItems[i].lo_crd),
			icon: myIcon
		});
	}
}

마커 클릭 시 팝업 보여주기

위와 같이 마커를 클릭했을 때 해당 지점의 상세 정보를 보여주고 싶다. 이를 위한 객체가 google.maps.InfoWindow 이다.

(참고로 마커 주위에 빨갛게 구역 표시되는 것은 Polygon을 설정한 것으로 나중에 따로 정리할 예정임..)

 

각각의 Maker객체는 이벤트핸들러(이벤트리스너)를 가질 수 있고, 클릭 이벤트가 발생했을 때 InfoWindow를 띄워주기만 하면 된다.

for (var j = 0; j < markers.length; j++) {
		google.maps.event.addListener(markers[j], 'click', function() {
			map.setCenter(this.getPosition());
			map.setZoom(17);
		
			var infowindow = new google.maps.InfoWindow({
				content: getTemplateAjax('./tmpl/detail.hbs', {
					spot_nm: this.spot_nm,
					occrrnc_cnt: this.occrrnc_cnt,
					caslt_cnt: this.caslt_cnt,
					dth_dnv_cnt: this.dth_dnv_cnt,
					se_dnv_cnt: this.se_dnv_cnt,
					sl_dnv_cnt: this.sl_dnv_cnt
				})
			});
			infowindow.open(map, this);
		});
}

InfoWindow 객체 생성 시 content를 위한 문자열이 들어가는데, html형태가 가능하여 팝업 내부에 원하는 포맷으로 보여줄 수가 있다.