아래는 특정 지역의 지도를 나타내는 가장 간단한 형태의 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/
'프로그래밍 Programming' 카테고리의 다른 글
| 구글 맵 Google Maps (3) - 실시간 데이터를 활용한 지도 그리기 (지진 강도에 따라 커지는 원) (0) | 2015.01.22 |
|---|---|
| 구글 맵 Google Maps (2) - 실시간 데이터를 활용한 지도 그리기 (0) | 2015.01.22 |
| phpliteadmin 에서 sqlite3 alter table 에러날 때 (0) | 2015.01.17 |
| 우분투(Ubuntu)에서 아파치(apache2) 실행하기 (0) | 2015.01.15 |
| _imaging.c:75:20: fatal error: Python.h: 그런 파일이나 디렉터리가 없습니다 (pip install PIL) (0) | 2015.01.15 |