대

구글맵 주소로 불러오기

· 2019-08-30 (금) 15:10:49 · 7514 · 6

글쓰기에서 wr_1을 주소입력이라고 하면

 

스킨의 view.skin.php에서 지도 출력할부분에 

아래 스크립트 넣으시고

<script src="https://maps.googleapis.com/maps/api/js?key=구글키&libraries=places&callback=initAutocomplete" async defer></script>

<!-- GoogoleMap Asynchronously Loading the API ********************************************* -->
<script type="text/javascript">
    function initialize() {
     
        var mapOptions = {
                            zoom: 15, // 지도를 띄웠을 때의 줌 크기
                            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 = '<?=$view[wr_1]?>'; // 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: '<?=$view[wr_subject]?>', // 마커에 마우스 포인트를 갖다댔을 때 뜨는 타이틀
                                position: results[0].geometry.location
                            });
 
                var content = "<font color=#000000><b><?=$view[wr_subject]?><br/><br/>찾으시는 위치입니다</b></font>"; // 말풍선 안에 들어갈 내용
             
                // 마커를 클릭했을 때의 이벤트. 말풍선 뿅~
                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>

<div id="map-canvas" style="width: 100%; height: 500px" title="<?=$view[wr_subject]?> 위치입니다."></div>

 

body 부분에 넣으시면 됩니다

<body onload="initialize()" onunload="GUnload()" style="margin:0px;">

 

허접하지만 도움이 되시길 ...

|

댓글 6개

주소로 찾기가 맙에 속 듭니다.
감사드려요..
감사합니다
2019-09-07 (토) 09:46:13
필요한 부분이였는데 공개해 주셔서 감사합니다.
2019-09-07 (토) 10:09:56
허접합니다 ㅎㅎ
감사합니다
2020-10-04 (일) 16:13:28
좋은 자료공유 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
19-09-15 조회 1.2만
19-09-13 조회 6,933
19-09-11 조회 9,115
19-09-09 조회 8,858
19-09-04 조회 8,866
19-09-02 조회 7,255
19-09-01 조회 8,392
19-08-30 조회 8,391
19-08-30 조회 1.2만
19-08-30 조회 7,515
19-08-29 조회 9,577
19-08-28 조회 8,598
19-08-26 조회 7,248
19-08-26 조회 6,353
19-08-25 조회 6,664
19-08-25 조회 6,514
19-08-22 조회 7,828
19-08-19 조회 8,114
19-08-16 조회 9,528
19-08-12 조회 6,812
19-08-10 조회 6,578
19-08-09 조회 6,667
19-08-09 조회 9,424
19-08-09 조회 1.1만
19-08-06 조회 6,580
19-08-05 조회 1.6만
19-08-05 조회 8,141
19-08-04 조회 7,754
19-08-02 조회 8,244
19-08-01 조회 6,681