[자바스크립트] Google Map API 소개 (1)

개발 노트/Javascript  2012.09.13 12:40



 

안녕하세요 개발자 명월입니다.

 

Javascript 로 사용할 만한 구글 맵을 소개 할까 합니다.

티스토리를 운영하시다 보면 맵 API를 사용할 때가 많습니다. 그럴 때 사용 하면 유용한 API 입니다.

 

https://developers.google.com/maps/documentation/javascript/?hl=ko

 

아래는 Default 소스 입니다.

 

<style type="text/css">  
 html { height: 100% }  
 body { height: 100%; margin: 0px; padding: 0px }  
 #map_canvas { }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript"> 
 var map;
 function initialize() {
       var latlng = new google.maps.LatLng(37.6098098499088, 127.02985600018314);    
       var myOptions = {       
           zoom: 15,      
           center: latlng,      
           mapTypeId: google.maps.MapTypeId.ROADMAP    
       };    
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       map.setTilt(45);
 }
 window.onload = function() {
       initialize();
 }
 </script>
<div id="map_canvas" style="width:500px;height:500px;"></div>

 

아래는 결과 화면 입니다.

 

 

아래는 Tistory 에 적용한 모습입니다.

 

 

 

 

Default 소스입니다.

 

Noname2.html

 

이번 Google Map을  연재 포스팅을 하여 자세히 다루어 보도록 하겠습니다. 

 


댓글 0개가 달렸습니다.
댓글쓰기