구글맵 분류별 마커 이미지

구글맵 분류별 마커 이미지

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";        //분류로 선택되지 않았을 경우 기본 아이콘사용
    }
}

 

수고하세요

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

회원로그인

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