구글맵 분류별 마커 이미지

구글맵 분류별 마커 이미지

QA

구글맵 분류별 마커 이미지

본문

정적인손님의 스킨을 이용하고있습니다.

https://sir.kr/g5_skin/9041?sfl=wr_subject%7C%7Cwr_content&stx=%EB%A7%88%EC%BB%A4

분류별 마커의 이미지를 바꾸고 싶은데

방법좀 알려주세요~!

예를들면 분류가사과일때 img01.png로 나오게

분류가 오렌지일때 img02.png로 나오게..

 

https://sir.kr/g4_skin/117807

여기를 참고해서  해보려했는데 잘안되네요~ㅠㅜㅠ

 

 

 

<div id="mgmap"></div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=ko®ion=kr&key=AIzaSyBhocy3srAlcqGRV9Nb2m-D960wNXsRTtg"></script>


<script type="text/javascript">

    function mgminfomap(){
        var myOptions = {
            zoom: 12,
              center: new google.maps.LatLng(37.156114, 126.805957),
             mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('mgmap'), myOptions);
        
        
 var locations = [
            <? for ($i=0; $i<count($list); $i++) {
                
                $lat=($list[$i][wr_3]);
                $lng=($list[$i][wr_4]);
                $name3=strip_tags($list[$i][wr_1]); //지역
                $name3 = str_replace('.', '', $name3);    //지역에서 .찍히는거 제거소스
                $name2=strip_tags($list[$i][ca_name]); //카테고리
                $name1=strip_tags($list[$i][subject]); //업체명
                $address=strip_tags($list[$i][wr_2]);//주소
                $phone=strip_tags($list[$i][wr_content]); //전화번호
                $bumin=strip_tags($list[$i][wr_5]);//핸드폰
                $bumin1=strip_tags($list[$i][wr_6]); //품목
$bumin2="<div class=mainmap1><img src={$list[$i][file][0][path]}/{$list[$i][file][2][file]}></div>";//메인 지도에 사진1
$bumin3="<div class=mainmap1><img src={$list[$i][file][0][path]}/{$list[$i][file][3][file]}></div>";//메인 지도에사진2
$bbb4="<div class=mainmap1><img src={$list[$i][file][0][path]}/{$list[$i][file][4][file]}></div>";//메인 지도에 사진3
                $img_path = ($list[$i][file][0][path]/$list[$i][file][0][file]);//
                $url=strip_tags($list[$i][wr_link]);
                $mapnum=($list[$i][wr_id]);
                $mtem="<table><tr><td colspan=2 width=300><a target=_blank href=/bbs/board.php?bo_table={$bo_table}&wr_id={$list[$i][wr_id]}&view_mode=bbs><h3 style= margin-top:0 !important;>$name1</h3></a></td></tr><tr><td width=70>· 주           소    :    </td><td width=230>{$address}</td></tr><tr><td width=70>· 전화번호    : </td><td width=230>{$phone}</td></tr></table>";
            ?>
            ['<?=$mtem?>', '<?=$lat?>', '<?=$lng?>', '<?=$mapnum?>']
                <? if ($i==count($list)-1) continue; ?>
                ,
            <? } ?>
        ];
                

        var infowindow = new google.maps.InfoWindow();

        var marker, i;
        
        var bounds = new google.maps.LatLngBounds();

        for (i = 0; i < locations.length; i++) {
            var image = '/theme/aliza/images/newblue2.png';
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
              var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
        
            });
            
            
            bounds.extend(myLatLng);

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                      infowindow.open(map, marker);
                }
              })(marker, i));
        }
        
        
for (i=0; i<3; i++) {
    
           var image = '/theme/aliza/images/newblue2.png';
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
              var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image
                
            });
            
            bounds.extend(myLatLng);

              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                      infowindow.open(map, marker);
                }
              })(marker, i));
    
    
}

    


    
        
zoomChangeBoundsListener = google.maps.event.addListener(map, "bounds_changed",function(event){ 
if(this.getZoom() > 20) 
this.setZoom(40); 
google.maps.event.removeListener(zoomChangeBoundsListener); 
}); 


map.fitBounds(bounds);
    }
    google.maps.event.addDomListener(window, 'load', mgminfomap);
        </script>

이 질문에 댓글 쓰기 :

답변 2

테스트는 안해봤지만..

카테고리명이랑 출력할 아이콘 주소와 이미지명만 맞쳐주시면 될 듯 합니다...

 

//아이콘 분류별 추가셋팅
function getIcon(type) {
    switch(type) {
        case "오렌지": return "http://localhost/img01.png";    //오렌지 마커 아이콘 사용
        case "사과": return "http://localhost/img02.png";        //사과 마커 아이콘 사용
        case "파인애플": return "http://localhost/img01.png";    //파인애플 마커 아이콘 사용
    }
}

    
 var locations = [
            <? for ($i=0; $i<count($list); $i++) {
                
                $lat=($list[$i][wr_3]);
                $lng=($list[$i][wr_4]);
                $name3=strip_tags($list[$i][wr_1]); //지역
                $name3 = str_replace('.', '', $name3);    //지역에서 .찍히는거 제거소스
                $name2=strip_tags($list[$i][ca_name]); //카테고리    카테고리가 오렌지,사과,파인애플 일경우
                $name1=strip_tags($list[$i][subject]); //업체명
                $address=strip_tags($list[$i][wr_2]);//주소
                $phone=strip_tags($list[$i][wr_content]); //전화번호
                $bumin=strip_tags($list[$i][wr_5]);//핸드폰
                $bumin1=strip_tags($list[$i][wr_6]); //품목
$bumin2="<div class=mainmap1><img src={$list[$i][file][0][path]}/{$list[$i][file][2][file]}></div>";//메인 지도에 사진1
$bumin3="<div class=mainmap1><img src={$list[$i][file][0][path]}/{$list[$i][file][3][file]}></div>";//메인 지도에사진2
$bbb4="<div class=mainmap1><img src={$list[$i][file][0][path]}/{$list[$i][file][4][file]}></div>";//메인 지도에 사진3
                $img_path = ($list[$i][file][0][path]/$list[$i][file][0][file]);//
                $url=strip_tags($list[$i][wr_link]);
                $mapnum=($list[$i][wr_id]);
                $mtem="<table><tr><td colspan=2 width=300><a target=_blank href=/bbs/board.php?bo_table={$bo_table}&wr_id={$list[$i][wr_id]}&view_mode=bbs><h3 style= margin-top:0 !important;>$name1</h3></a></td></tr><tr><td width=70>· 주           소    :    </td><td width=230>{$address}</td></tr><tr><td width=70>· 전화번호    : </td><td width=230>{$phone}</td></tr></table>";
            ?>
            ['<?=$mtem?>', '<?=$lat?>', '<?=$lng?>', '<?=$mapnum?>','<?=$name2?>']
                <? if ($i==count($list)-1) continue; ?>
                ,
            <? } ?>
        ];
                
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        
        var bounds = new google.maps.LatLngBounds();
        for (i = 0; i < locations.length; i++) {
            var image = '/theme/aliza/images/newblue2.png';
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
              var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                //icon: image

                icon: getIcon(locations[i][4])        //카테고리명에 따라 셋팅된 아이콘 출력
            });
            

//아이콘 분류별 추가셋팅

function getIcon(type) {
    switch(type) {
        case "오렌지": return "http://localhost/img01.png";    //오렌지 마커 아이콘 사용
        case "사과": return "http://localhost/img02.png";        //사과 마커 아이콘 사용
        case "파인애플": return "http://localhost/img01.png";    //파인애플 마커 아이콘 사용
        default: return "http://localhost/img03.png";        //분류로 선택되지 않았을 경우 기본 아이콘사용
    }
}

 

수고하세요

군악님 정말 진심으로 감사합니다.
적용매우 잘되는군요
해결책 못얻을거라고 생각하고 낙심하고 있었는데
생각치도 못한 답변에 해결까지 너무나도 감사드립니다.

군악님 추가로 질문하자면
해당 관련 수정파일로 소스를 수정하니
지도 zoom이 매우 확대되게 설정ㄷ해놔도
작게 축소되서 보이는데 이부분이 왜그런지 아나요 ㅠㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 123,535 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT