구글맵- 마커사용하기

구글맵을 사용하면서 좌표만 표시하는 경우가 있고

마커 클릭을 통해서 정보를 제공할때도 있다 

그런경우 사용하면 된다.

 

해당 위치만 가는 경우 

var map;
function initMap() {
	var chk_lat = Number('${contents.change_y_pos}');
	var chk_lng = Number('${contents.change_x_pos}');				
	var curLatLng = {
		lng: chk_lng,
		lat: chk_lat
	};

	map = new google.maps.Map(document.getElementById('map'), {
	     center: curLatLng,
	     scrollwheel: false,
	     zoom: 16
	});
}

 

해당위치 및 주변 마커 생성

var map;
function initMap() {
	var chk_lat = Number('${contents.change_y_pos}');
	var chk_lng = Number('${contents.change_x_pos}');				
	var curLatLng = {
		lng: chk_lng,
		lat: chk_lat
	};

	map = new google.maps.Map(document.getElementById('map'), {
	     center: curLatLng,
	     scrollwheel: false,
	     zoom: 16
	});

	var locations=[
		['${contents.fd_name}', '${contents.change_y_pos}', '${contents.change_x_pos}', '${contents.fd_tel}','${contents.fd_road_addr}','${contents.pk_idx}','Y']
		<c:if test="${!empty l_list }">
			<c:forEach var="item" items="${l_list}" varStatus="status">
				, [ '${item.fd_name}', '${item.change_y_pos}',  '${item.change_x_pos}', '${item.fd_tel}', '${item.fd_road_addr}', '${item.pk_idx}','Y']
			</c:forEach>
		</c:if>
	];

	var infowindow = new google.maps.InfoWindow();
	var marker, i;
	for (i = 0; i < locations.length; i++) {
		if(i==0){
			marker = new google.maps.Marker({
				id:i,
				position: new google.maps.LatLng(locations[i][1], locations[i][2]),
				map: map,
				icon: {
				url: "/resources/img/gogole/blue-dot.png"
				}
			});
		}else{
			marker = new google.maps.Marker({
				id:i,
				position: new google.maps.LatLng(locations[i][1], locations[i][2]),
				map: map,
				icon: {
					url: "/resources/img/gogole/yellow-dot.png"
					}
				});
		}
		google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
				var temp_contents = "";
				var temp_chk_state = locations[i][6];
				if(temp_chk_state == 'Y'){
					temp_contents += "<a href=\"/detail_view.do?service_no=${service_no}&seq="+locations[i][5]+"\">";
					temp_contents += "<span id=\"sel_hospital\">";
					temp_contents += (locations[i][0]);
					temp_contents += "</span>";
					temp_contents += "<br/>";
					temp_contents += (locations[i][3])+"<br/>";
					temp_contents += (locations[i][4])+"<br/>";								
					temp_contents += "<a href=\"/detail_view.do?service_no=${service_no}&seq="+locations[i][5]+"\">";
					temp_contents += "<span id=\"sel_hospital_detail\" style=\"cursor:pointer;\">상세보기</span>";
					temp_contents += "</a>";
				}else{
					temp_contents += "<span id=\"sel_hospital\">";
					temp_contents += (locations[i][0]);
					temp_contents += "</span>";	
				}	
				infowindow.setContent(temp_contents);
				infowindow.open(map, marker);
			}
		})(marker, i));
		if(marker){
			marker.addListener('click', function() {
				map.setZoom(15);
				map.setCenter(this.getPosition());
			});
		}
	}
}

var locations은 배열로 데이터 저장 후 마커 정보 표시할때 사용한다.