구글맵 중심점(Google maps Bounds) 자동으로 계산하기
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=ko">
</script>
<script type="text/javascript">
<!--
var map;
var markersArray = [];
coordinates = [];
//초기 실행 함수
function initialize(){
var up_lat = "37.5562989";
var up_lng = "126.9220863";
var car_lat = "37.4784514";
var car_lng = "126.8818163";
var up_latlng = new google.maps.LatLng(up_lat, up_lng);
var car_latlng = new google.maps.LatLng(car_lat, car_lng);
var mapOptions = {
streetViewControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
// coordinates에 각 마커의 위치값(위도,경도)을 마커의 수만큼 push
coordinates.push(up_latlng);
coordinates.push(car_latlng);
// 마커의 수만큼 반복하여 coordinates에 push된 위치 정보값을 계산 후
// 맵의 zoom level과 center를 맵에 적용
bounds = new google.maps.LatLngBounds();
for (var i=0; i < 2; i++) {
bounds.extend(coordinates[i]);
}
map.fitBounds(bounds);
addMarker(up_latlng);
addMarker(car_latlng);
}
//지도에 마커출력
function addMarker(latlng) {
marker = new google.maps.Marker({
position: latlng,
map: map
});
markersArray.push(marker);
}
//-->
</script>
</head>
<body onload="initialize()">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="500"><div id="map_canvas" style="width:100%; height:100%"></div></td>
</tr>
</table>
</body>
</html>