출처 : http://blog.naver.com/jiho3400?Redirect=Log&logNo=10174180497


오늘은 구글 지도에 관해서 간단히 정리해 봤습니다.

google map v3 로 바뀌고 부터는 키 정보 필요없이 구글 지도 정보를 사용하는게 가능해졌는데요..

빙맵이나 다른 경쟁사와 비교해봐도 컨텐츠를 비롯해서 사용방법, 정보의 규모면등등 현존 쵝오 인듯 하네요...^^

 

그럼 구글 맵 간단히 시작하는 방법을 알아보겠습니다.

 

위의 이미지와 같은 지도를 만들어 보겠습니다.

먼저 google api 를 참조해서 넣어야겠죠. 단 당연한 말이겠지만 인터넷이 사용가능한 환경에서만 개발이 가능합니다..^^

먼저 head테그 내에 아래의 자바스크립트를 삽입합니다.

   1: <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

이걸 삽입하면 이제 구글 지도 개발을 커스터마이징 하는게 가능합니다.

그럼 다음으로 자바스크립트를 적어보겠습니다.

   1: <script>
   2: var map;
   3: function initialize() {
   4:   var mapOptions = {
   5:     // 줌을 적용
   6:     zoom: 8,
   7:     // 지도의 중심지점을 설정
   8:     center: new google.maps.LatLng(-34.397, 150.644),
   9:     // 지도의 타입 설정
  10:     mapTypeId: google.maps.MapTypeId.ROADMAP
  11:   };
  12:   map = new google.maps.Map(document.getElementById('map-canvas'),
  13:       mapOptions);
  14: }
  15:  
  16: google.maps.event.addDomListener(window, 'load', initialize);
  17:  
  18:     </script>

이 자바스크립트를 위의 api바로 밑에 삽입합니다.

 

그리고 html에 타겟영역을 만들어주면 끝입니다.

 

   1: <div style="width:600px; height:400px;" id="map-canvas"></div>

지도를 삽입하고 싶은 html영역에 위 코드를 넣으면 끝입니다.

일단 크기는 600 * 400으로 넣었습니다만 원하시는 크기로 바꾸면 지도의 크기가 결정됩니다.

 

어때요? 참 쉽죠^^

 

그럼 시간날때 조금더 응용법을 올려보도록 하겠습니다.

아래는 여기까지의 완성된 소스 입니다.

   1: <!DOCTYPE html>
   2: <html>
   3:   <head>
   4:     <title>Simple Map</title>
   5:     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   6:     <meta charset="utf-8">
   7:     <style>
   8:       html, body, #map-canvas {
   9:         margin: 0;
  10:         padding: 0;
  11:         height: 100%;
  12:       }
  13:     </style>
  14:     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">   1:  </pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">   2:     <script></pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">   3: var map;</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">   4: function initialize() {</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">   5:   var mapOptions = {</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">   6:     zoom: 8,</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">   7:     center: new google.maps.LatLng(-34.397, 150.644),</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">   8:     mapTypeId: google.maps.MapTypeId.ROADMAP</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">   9:   };</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">  10:   map = new google.maps.Map(document.getElementById('map-canvas'),</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">  11:       mapOptions);</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">  12: }</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">  13:  </pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">  14: google.maps.event.addDomListener(window, 'load', initialize);</pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">  15:  </pre><pre style="border-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: #f4f4f4">  16:     </pre></script>
  15:   </head>
  16:   <body>
  17:     <div style="width:600px; height:400px;" id="map-canvas"></div>
  18:   </body>
  19: </html>

 


저작자표시 비영리

'프로그래밍 > JavaScript' 카테고리의 다른 글

구글맵에 파라미터 넘기기  (0) 2013.10.08
구글맵 적용 히기 + 주소로 입력시 위도경도 알아서 확인 + 구청적용 파일 추가(2013/10/04)  (1) 2013.09.10
팝업창에서 이미지 확대/축소시 해당 팝업창의 크기도 같이 조절하는 코드  (0) 2013.08.29
javascript 롤링(배너등)  (0) 2013.08.19
자바스크립트 새로고침 종류  (0) 2013.08.01

+ Recent posts

티스토리툴바