구글맵 개발 시
페이지에 접근 시 맵 로딩이 이루어집니다.
맵 로딩이 완료되자마자 어떤 맵 이벤트 함수를 실행하고자 할 때 사용하는 방법입니다.
아래의 빨갛고 굵게 표시된 소스를 추가합니다.
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>
'Open API > WEB' 카테고리의 다른 글
| 다음 사이트에 멀웨어가 있습니다 해결방법 (7) | 2016.05.02 |
|---|---|
| ASP에서 네이버 지도 지오코딩(좌표변환) 예제 (3) | 2013.04.17 |
| 네이버 지도 API 키 발급 방법 (0) | 2013.04.12 |
| (네이버 지도) 지도가 잠깐 출력되었다가 다시 사라지는 현상 해결 (2) | 2013.04.12 |
| [구글맵스,google maps] 정보창(infoWindow) 출력 (0) | 2013.01.22 |
| 구글맵 마커 이미지 변경 (2) | 2012.11.21 |
| 구글맵 줌 변경, 지도 이동 시 현재 지도의 범위에만 마커 출력하기 (0) | 2012.11.21 |
| 구글맵 중심점(Google maps Bounds) 자동으로 계산하기 (0) | 2012.09.25 |
| (WEB/JavaScript) 구글맵 지오코딩(geocoding) (0) | 2012.09.25 |
| 구글맵스 개발 시작하기 (2) | 2012.09.20 |