티스토리 뷰

공장 (factory)/- Programming..

구글맵(Google Maps JavaScript API v3) 적용, 위치 표시와 말풍선 띄우기.

무중력인간 2013. 8. 15. 21:38

   구글지도를 웹페이지에 적용했을 때의 모습이다.


   방법은 굉장히 쉽다.


   사실.. 처음에 아무것도 몰랐을 때는 좀 어려운데, 알고나면 별 거 아니다.


   https://developers.google.com/maps/documentation/javascript/



   아래 소스에 주석으로 설명을 달아놨으니 필요한 사람은 참고하길 바란다.






   *** 먼저 독타입을 HTML5 형식으로 맞춰줄 것! "<!DOCTYPE html>"


   ↓ <head>와 </head>사이에 넣는다.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript">
      function initialize() {
        var mapLocation = new google.maps.LatLng('36.322473', '127.412501'); // 지도에서 가운데로 위치할 위도와 경도
        var markLocation = new google.maps.LatLng('36.322473', '127.412501'); // 마커가 위치할 위도와 경도
         
        var mapOptions = {
          center: mapLocation, // 지도에서 가운데로 위치할 위도와 경도(변수)
          zoom: 18, // 지도 zoom단계
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), // id: map-canvas, body에 있는 div태그의 id와 같아야 함
            mapOptions);
         
        var size_x = 60; // 마커로 사용할 이미지의 가로 크기
        var size_y = 60; // 마커로 사용할 이미지의 세로 크기
         
        // 마커로 사용할 이미지 주소
        var image = new google.maps.MarkerImage( 'http://www.larva.re.kr/home/img/boximage3.png',
                            new google.maps.Size(size_x, size_y),
                            '',
                            '',
                            new google.maps.Size(size_x, size_y));
         
        var marker;
        marker = new google.maps.Marker({
               position: markLocation, // 마커가 위치할 위도와 경도(변수)
               map: map,
               icon: image, // 마커로 사용할 이미지(변수)
//             info: '말풍선 안에 들어갈 내용',
               title: '서대전네거리역이지롱~' // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
        });
         
        var content = "이곳은 서대전네거리역이다! <br/> 지하철 타러 가자~"; // 말풍선 안에 들어갈 내용
         
        // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
        var infowindow = new google.maps.InfoWindow({ content: content});
 
        google.maps.event.addListener(marker, "click", function() {
            infowindow.open(map,marker);
        });
         
 
         
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>



   ↓ <body>와 </body>사이에 넣는다.
?
1
<div id="map-canvas" style="width: 100%; height: 400px"></div>


      참고로 위도와 경도는 https://maps.google.com 의 지도에서,

                            오른쪽 클릭 → 이곳이 궁금한가요? 선택하면 알아낼 수 있다.



저작자표시 비영리 변경금지

'공장 (factory) > - Programming..' 카테고리의 다른 글

[JSP] 전체 방문자 수/오늘 방문자 수 count  (2) 2013.08.26
구글맵(Google Maps JavaScript API v3) 주소로 검색하기 - Geocoding  (10) 2013.08.22
Java 환경변수 설정.  (0) 2013.08.06
오라클 유저 생성 및 권한부여.  (0) 2013.08.06
sql developer 시작 시 설정.  (0) 2013.08.06
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함