본문 바로가기
iPhone and Mac OSX

Google Map API Ver.3 - Tutorial Part

by 풍야 2010. 4. 7.

<Basic Source>

<html>
 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  // 유저에 의한 리사이즈(크기변경) 불가 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> // 구글맵API 로딩
<script type="text/javascript"> 
 
function initialize() { 
   
var latlng = new google.maps.LatLng(-34.397, 150.644); // 세팅!!(Latitudes,Longitudes)
   
var myOptions = { 
      zoom
: 8, 
      center
: latlng, 
      mapTypeId
: google.maps.MapTypeId.ROADMAP 
   
}; // 맵 옵션
   
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Elementary Object
 
} 
 
</script> 
</head> 
<body onload="initialize()"> // 맵을 로딩하는 부분
 
<div id="map_canvas" style="width:100%; height:100%"></div> // 맵 고정
</body> 
</html>

<Map Option>

<div id="map_canvas" style="width: 100%; height: 100%"></div>  // 모바일 기기에서 100%화면(풀스크린)으로 
                                                                                                                               쓴다는 의미이다.


mapTypeId: google.maps.MapTypeId.ROADMAP  // roadmap, satellite, hybrid, terrain 설정으로 맵설정 가능

 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // Map 클레스 생성 및 설정

<body onload="initialize()"> // 이벤트 핸들러 파트이다.



링크 : http://code.google.com/intl/ko/apis/maps/documentation/v3/introduction.html