이준빈은 호박머리

IT 프로그래밍 개발 정보 블로그, 이준빈은 호박머리 입니다.

Open API/WEB

구글맵 중심점(Google maps Bounds) 자동으로 계산하기

준콩이 2012. 9. 25. 15:00
반응형

<!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>

반응형