2013. 1. 15. 15:22ㆍWEB/Google Maps
<!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);
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>
-------------------------------------------------------------------
위의 소스를 실행하면 구글맵의 설정이 완료됩니다.
기존에는 구글맵측에서 API키를 받아 설정했지만, 버전업 후 간단한 스크립트 참조로
구글맵 개발설정을 할 수 있습니다.
body 태그 안쪽에는 맵 캔버스가 위치하고, 맵에 대한 컨트롤, 오버레이 등은 자바스크립트 단에서 처리합니다.
현재 초기 위치는
가산디지털단지역의 위치이고, 마커가 찍힌곳의 위치는 현재 위치(회사)입니다.
'WEB > Google Maps' 카테고리의 다른 글
| 구글맵 맵 로딩이 완료된 후 함수 실행(리스너 등록) (0) | 2013.01.15 |
|---|---|
| 구글맵 마커 이미지 변경 (0) | 2013.01.15 |
| 구글맵 줌 변경, 지도 이동 시 현재 지도의 범위에만 마커 출력하기 (0) | 2013.01.15 |
| 구글맵 중심점 자동으로 계산하기 (0) | 2013.01.15 |
| (WEB/JavaScript) 구글맵 지오코딩(geocoding) (0) | 2013.01.15 |