구글 맵 Google Maps (1) - 기본 맵 그리기
아래는 특정 지역의 지도를 나타내는 가장 간단한 형태의 html 파일이다.
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<html>
<head><style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- API 획득 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- 보여주고자 하는 지역의 위도, 경도값 입력(LatLng) -->
<script type="text/javascript">
function initialize() {<!-- 지도의 속성을 포함하는 객체 mapOptions 만들기 -->
<!-- LatLng 는 지도 가운데 지점의 위도, 경도값을 의미함-->
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};<!-- map 객체 만들기 -->
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script></head>
<!-- onload 이벤트시 지도 객체 초기화 -->
<body onload="initialize()"><!-- 지도를 담을 map_canvas 라는 요소 생성 -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
위도, 경도 값은 아래의 사이트를 통해서 구할 수 있다.
http://mygeoposition.com/