구글맵 맵 로딩이 완료된 후 함수 실행(리스너 등록)

2013. 1. 15. 15:28WEB/Google Maps



반응형

구글맵 개발 시

페이지에 접근 시 맵 로딩이 이루어집니다.

맵 로딩이 완료되자마자 어떤 맵 이벤트 함수를 실행하고자 할 때 사용하는 방법입니다.


아래의 빨갛고 굵게 표시된 소스를 추가합니다.

map이 idle 상태일 경우 1회 실행되는 맵 이벤트 리스너를 추가했습니다.

리스너를 알기 전까지..setTimeout을 사용하여 몇초 후 함수 실행을 하라는 설정을 사용했습니다.

컴퓨터의 사양, 인터넷 속도에 따라 맵로딩 시간이 틀리므로

맵이 로딩되기 전에 맵 관련 함수가 먼저 실행되면 javascript 에러가 발생합니다.

리스너를 사용하여 적절히 대응할 수 있습니다.



구글맵 API : https://developers.google.com/maps/?hl=ko

맵 리스너 : https://developers.google.com/maps/documentation/javascript/reference?hl=ko#MapsEventListener



<!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="https://maps.google.com/maps/api/js?sensor=false">

</script>

<script type="text/javascript">



var gsStatoin = new google.maps.LatLng(37.48144560453497, 126.88266361877436);

var parliament = new google.maps.LatLng(37.4781527917781, 126.88218618556971);

var marker;

var map;


function initialize() {

  var mapOptions = {

zoom: 13,

mapTypeId: google.maps.MapTypeId.ROADMAP,

center: gsStatoin

  };


  map = new google.maps.Map(document.getElementById("map_canvas"),

  mapOptions);


    google.maps.event.addListenerOnce(map, 'idle', function(){

    alert('맵 로딩이 완료되었습니다.'); //맵 로딩이 완료된 후 실행할 함수 추가

  });


  marker = new google.maps.Marker({

map:map,

animation: google.maps.Animation.DROP,

position: parliament

  });

//   google.maps.event.addListener(marker, 'click', toggleBounce);


  google.maps.event.addListener(map, 'click', function(event) {

alert(event.latLng);

});

}

/*

function toggleBounce() {


  if (marker.getAnimation() != null) {

marker.setAnimation(null);

  } else {

marker.setAnimation(google.maps.Animation.BOUNCE);

  }

}

*/



</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>

 

반응형