구글맵스 개발 시작하기
<!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 태그 안쪽에는 맵 캔버스가 위치하고, 맵에 대한 컨트롤, 오버레이 등은 자바스크립트 단에서 처리합니다.
현재 초기 위치는
가산디지털단지역의 위치이고, 마커가 찍힌곳의 위치는 현재 위치(회사)입니다.