구글맵 api 3.0 마커들 센터잡기

구글맵 api 3.0 마커들 센터잡기

 참고 URL :http://stackoverflow.com/questions/2818984/google-map-api-v3-center-zoom-on-displayed-markers

관리자페이지에서 상품을 등록하고, 상품에 따른 좌표를 등록하고있을때.

처음엔 모든상품의 마커들이 다 나와있기 때문에 아주 작은 사이즈로 표시되고있다.

그리고 카테고리를 검색한다던지 지역검색을 했을때, 검색된 마커들만 모은뒤 한 화면에 다 들어오게 줌인해서 보여준다.

이거 하나만 있으면 일일이 센터 잡아주고 확대해주고 할 필요가 없어진다.

베리굿

 

 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script language="javascript">

var map;

var myLatlng1 = new google.maps.LatLng(x좌표, y좌표);

var myLatlng2 = new google.maps.LatLng(x좌표, y좌표);

var location_arr = [myLatlng1 ,myLatlng2 ];

 

function initialize() {
  var zoom_level = 9;
  
  var mapOptions = {
   zoom: zoom_level,
   //center: location_arr[0],
   center: new google.maps.LatLng(26.479820142888863, 127.74529022050778),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

  var coord;

  for (coord in location_arr) {
   var marker = new google.maps.Marker({
     position: location_arr[coord],
     map: map,
     animation: google.maps.Animation.DROP, //구글아이콘
     //icon: image,//사용자아이콘
     draggable:false //아이콘드레그
    });
   
    //map_content(marker,coord);//각포인트의 설명창
  }

  //좌표들중에서 센터잡기
  var latlngbounds = new google.maps.LatLngBounds();

  for(var coord in location_arr){
   latlngbounds.extend(location_arr[coord]);
  }

  map.setCenter(latlngbounds.getCenter());
  //console.log(latlngbounds);

  if(location_arr.length>1){//1개 있을때 센터잡으려고하면 최대확대를 해버린다. 그거 방지해주기~
   map.fitBounds(latlngbounds);
  }
 }

google.maps.event.addDomListener(window, 'load', initialize);

</script>