Google Maps Javascript API V3 는 그 유명한 구글지도 세번째 번입니다.
https://developers.google.com/maps/documentation/javascript/tutorial
위 경로의 Hello, World 예제를 살펴보도록 하겠습니다.
이 예제는
HTML에 캔버스로 지도가 나올 영역을 정의하고
위도 경도를 입력하고
옵션값을 객체로 정의해서
캔버스에 지도를 그리는 형식으로 되어 있습니다.
주의 할 점
1. <!DOCTYPE html> 선언을 사용하여 HTML5로 선언
2. script 태그를 사용하여 Maps API 자바스크립트를 포함
3. 지도를 넣을 'map_canvas'라는 div 요소를 생성
4. 다양한 지도 속성을 담고 있는 자바스크립트 객체 리터럴을 만듬
5. 'map' 객체를 만들기 위해 자바스크립트 함수를 작성
6. body 태그의 onload 이벤트에서 지도 객체를 초기화
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
<body onload="initialize()">
var myLatlng = new google.maps.LatLng(위도, 경도)
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
여기서 zoom:8 이라는 속성은 지도의 고도를 의미합니다.
줌레벨이 0이면 완전히 축소된 지구의 지도에 해당하고 줌레벨이 높아지면 더 높은 해상도로 확대됩니다.
[전체 소스]
<!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">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
아래 이미지 처럼 호주 시드니 주변이 나오네요.
'WEB_TECH > HTML5' 카테고리의 다른 글
| 단말기의 기종을 알아내는 구문 (0) | 2013.06.13 |
|---|---|
| canvas animation 예제입니다. (0) | 2013.05.24 |
| HTML5 사운드 플레이어 만들기1 (0) | 2013.05.23 |
| Geolocation API (0) | 2012.10.25 |
| 새로운 HTML5 Javascript API (0) | 2012.10.22 |
| <canvas>에 4가지 간단 그리기 예제 (0) | 2012.10.22 |
| <canvas>란 무엇일까? (0) | 2012.10.22 |
| HTML5에서 새로 사용된 엘리먼드들 (0) | 2012.10.22 |
| html5에서 사운드 사용하기 (0) | 2012.08.09 |
