구글맵 분류별 마커 이미지
본문
정적인손님의 스킨을 이용하고있습니다.
https://sir.kr/g5_skin/9041?sfl=wr_subject%7C%7Cwr_content&stx=%EB%A7%88%EC%BB%A4
분류별 마커의 이미지를 바꾸고 싶은데
방법좀 알려주세요~!
예를들면 분류가사과일때 img01.png로 나오게
분류가 오렌지일때 img02.png로 나오게..
여기를 참고해서 해보려했는데 잘안되네요~ㅠㅜㅠ
<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"; //분류로 선택되지 않았을 경우 기본 아이콘사용
}
}
수고하세요