[자바스크립트] Google Map API 소개 (3) -초보자 용

개발 노트/Javascript  2012.09.14 14:41



 

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

 

이번 포스팅에서는 google Map을 좀 더 편하게 사용하는 법에 대해 설명하겠습니다.

아무래도 블로그를 운영하시는 분들이 전부 개발자처럼 자바스크립트와 태그를 운용할 수 있는게 아니기에 이번 포스팅에서는 기능은 한정적이나 누구나 사용할 수 있게 포스팅을 하겠습니다.

 

먼저 사용에 필요한 모듈입니다.

 

Lat
Lng
Zoom

 

포스팅 하실 때 유용하게 사용할 소스 코드입니다.

 

  1 <script type="text/javascript"
  2                     src="https://maps.google.com/maps/api/js?sensor=true"></script>
  3 <script>
  4 window.onload = function() {
  5 var latlng = new google.maps.LatLng(37.61364290150408, 127.03001693272404);
  6 var marker_name = "롯데 백화점";
  7 var marker_position
  8                    = new google.maps.LatLng(37.61449277532038, 127.03057483219913);
  9 var myOptions = {      
10 zoom: 15,      
11 center: latlng,      
12 mapTypeId: google.maps.MapTypeId.ROADMAP,
13 zoomControl : true,
14 streetViewControl : false,
15 disableDoubleClickZoom : false,
16 draggable  : false,
17 scrollwheel : false,
18 mapTypeControl : false,
19 scaleControl : true,
20 rotateControl : false,
21 panControl : false
22 };    
23 var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
24 var marker = new google.maps.Marker({
25 position : marker_position,
26 map : map,
27 title : marker_name
28 });
29 }
30 </script>
31 <div id="map_canvas" style="width:300px;height:300px;"></div>


 

※ 제 블로그는 긁어오기 제한에 걸려 있으므로 첨부자료로 올려드립니다.

 

googlemap.html

 

먼저 첨부파일을 다운 받으시기 바랍니다.
 

 

메모장에서 소스 확인 가능합니다.

 

 

그리고 4번째, 5번째, 6번째 줄을 확인 하시기 바랍니다.

 

 

var latlng = new google.maps.LatLng(37.61364290150408, 127.03001693272404); 이 부분은 지도의 가장 가운데의 좌표입니다.

좌표는 위 모듈을 통해 구하면 되겠습니다.

 

 

밑에 좌표 36.608925925..., 1237.03808 이렇게 나옵니다. 물론 소수점 끝까지 다 쓰면 정확하겠으나,

소수점 3~4개까지만 써도 맞습니다.

 

그렇게 좌표를 구해서 입력합니다.

※ zoom 은 축척 레벨입니다. 밑에 zoom 숫자를 맞추면 축척도 설정할 수 있습니다.

 

 

두번째는 마크 이름입니다. 세번째는 마크 좌표입니다.

 

마크 좌표까지 다 구하고 소스 코드를 수정하였습니다.

 

 

이것을 블로그 작성 할 때 넣습니다.

 

 

html 소스 코드 넣는 곳을 누르고 소스를 붙여 넣기 합니다.

 

 

결과 화면입니다.

 

 

맛집을 포스팅 하거나 여행 관광지(구글 맵은 일본, 중국, 유럽, 미국도 가능합니다.)등을 포스팅하실 때 유용하게 쓰이시길 바랍니다.

기능은 확대랑 축척만 있습니다. 더 궁금한 점이 있으면 쪽지 남겨주세요.

 


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