구글맵 분류별 마커 이미지 채택완료
정적인손님의 스킨을 이용하고있습니다.
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" href="https://sir.kr/g4_skin/117807">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]) //카테고리명에 따라 셋팅된 아이콘 출력
});
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
//아이콘 분류별 추가셋팅
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"; //분류로 선택되지 않았을 경우 기본 아이콘사용
}
}
수고하세요
답변에 대한 댓글 2개
적용매우 잘되는군요
해결책 못얻을거라고 생각하고 낙심하고 있었는데
생각치도 못한 답변에 해결까지 너무나도 감사드립니다.
해당 관련 수정파일로 소스를 수정하니
지도 zoom이 매우 확대되게 설정ㄷ해놔도
작게 축소되서 보이는데 이부분이 왜그런지 아나요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
분류선택안된거는 img03.png로 일괄적으로 볼순없을까요
구글맵의 기본 마커이미지로 나타나서요~