첨부파일 : 

map.htm




출처 : http://zero-gravity.tistory.com/154


   ↓ <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>

[출처] 구글 지도 API 사용하기 기초 (google map api)|작성자 호야호야




//위치 검색하기


  위치를 검색할 때, 위도와 경도로 찾게 되면 항상 미국 구글맵에 들어가서 위치를 검색한 다음에 위도와 경도를 알아내서 직접 기입해야 하는 수밖에 없는데... 이번 글에서는 그런 불편을 없애기 위해 위도/경도가 아닌 주소로 바로 검색하는 방법을 사용하려 한다.


   이 방법을 찾게 된 이유는 DB에 있는 수 십개의 업체들을 웹상에 지도로 표시해야 하는데 위도/경도 컬럼을 만들어서 일일히 업데이트 하는 게 지옥이었기 때문이다. 그래서 주소 컬럼을 이용해서 업체의 주소를 가져와 바로 검색할 수 있는 방법을 찾게 됐다. 구글맵API에서는 이걸 지오코딩이라고 부른다.


   전에도 말했지만 방법은 어렵지 않다.





※ 참고한 곳 ※

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

https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple?hl=ko


   참고했던 사이트를 보면, 구글에서는 주소 검색을 사용자가 직접 입력해 검색하는 방식으로 예제를 보여주는데, 아래 내가 한 방식은 미리 주소를 코딩해놓는 방식이다.





먼저 html doctype을 <!DOCTYPE html>로 변경해준 다음,

head 부분에

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

추가해준다.


그리고..

↓ head에 삽입

?
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
48
49
50
51
<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript">
    function initialize() {
     
        var mapOptions = {
                            zoom: 18, // 지도를 띄웠을 때의 줌 크기
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
         
         
        var map = new google.maps.Map(document.getElementById("map-canvas"), // div의 id과 값이 같아야 함. "map-canvas"
                                    mapOptions);
         
        var size_x = 40; // 마커로 사용할 이미지의 가로 크기
        var size_y = 40; // 마커로 사용할 이미지의 세로 크기
     
        // 마커로 사용할 이미지 주소
        var image = new google.maps.MarkerImage( '주소 여기에 기입!',
                                                    new google.maps.Size(size_x, size_y),
                                                    '',
                                                    '',
                                                    new google.maps.Size(size_x, size_y));
         
        // Geocoding *****************************************************
        var address = '대전광역시 중구 한밭도서관길 222'; // DB에서 주소 가져와서 검색하거나 왼쪽과 같이 주소를 바로 코딩.
        var marker = null;
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                                map: map,
                                icon: image, // 마커로 사용할 이미지(변수)
                                title: '한밭도서관', // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
                                position: results[0].geometry.location
                            });
 
                var content = "한밭도서관<br/><br/>Tel: 042-580-4114"; // 말풍선 안에 들어갈 내용
             
                // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
                var infowindow = new google.maps.InfoWindow({ content: content});
                google.maps.event.addListener(marker, "click", function() {infowindow.open(map,marker);});
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        // Geocoding // *****************************************************
         
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>



↓body 안에 삽입

?
1
<div id="map-canvas" style="width: 100%; height: 340px" title="도서관 위치입니다."></div>


끝~!


저작자표시 비영리

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

base64 스크립트 암호화/복호화  (0) 2014.03.03
구글맵에 파라미터 넘기기  (0) 2013.10.08
구글맵 사용법  (0) 2013.09.10
팝업창에서 이미지 확대/축소시 해당 팝업창의 크기도 같이 조절하는 코드  (0) 2013.08.29
javascript 롤링(배너등)  (0) 2013.08.19

+ Recent posts

티스토리툴바