구글맵 마커 게시판 분류에 따라 다른 이미지 적용
본문
안녕하세요.
항상 만들어진 스킨적용만 할줄알다가 요즘 스스로 수정을 시도하고 있는 중인데 벽에 부딪쳤습니다..
이윰 구글맵 다중마커 스킨을 사용하는중입니다.
게시판 분류에 따라 설정한 마커 이미지로 변경하고 싶은데 잘 안되네요.
아이콘에 대한 주소를 입력해주고 카테고리에 따라 마커를 지정해줘야 하는거 같은데 이 부분을 어디에 어떻게 추가하면 될까요?
빨간색부분이 추가한 부분인데 고수님들 도와주세요.
(function() {
var $frame = $('#tab-category');
var $wrap = $frame.parent();
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
startAt: $frame.find('.active'),
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
var tabWidth = $('#tab-category').width();
var categoryWidth = $('.category-list').width();
if (tabWidth < categoryWidth) {
$('.controls').show();
}
});
</script>
<?php } ?>
<script>
$('#fakeloader').fakeLoader({
timeToHide:3000,
zIndex:"11",
spinner:"spinner6",
bgColor:"#fff",
});
$(window).load(function(){
$('#fakeloader').fadeOut(300);
});
<?php if ($eyoom_board['bo_use_addon_map'] == '1') { ?>
(function(){
var script = '<script type="text/javascript" src="<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/js/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
var gm = google.maps;
var config = {
el: 'gmap_list_canvas',
lat: 14.5995124,
lon: 120.9842195,
zoom: 8,
minZoom: 15,
type: google.maps.MapTypeId.ROADMAP
};
var spiderConfig = {
keepSpiderfied: true,
event: 'mouseover'
};
var icons = {
한식: {
icon: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/markerstar1.png'
},
};
function initialize() {
var map = new gm.Map(document.getElementById(config.el), {
zoom: config.zoom,
center: new gm.LatLng(config.lat, config.lon),
mapTypeId: config.type
});
var markerSpiderfier = new OverlappingMarkerSpiderfier(map, spiderConfig);
var locations = [
<?php $cnt = count((array)$list); for ($i=0; $i<$cnt; $i++) { ?>
['<?php echo $list[$i]['wr_7']; ?>','<?php echo $list[$i]['wr_8']; ?>']<?php echo $cnt != ($i+1) ? ',':''; ?>
<?php } ?>
];
var infoWindowContent = [
<?php $cnt = count((array)$list); for ($i=0; $i<$cnt; $i++) { ?>
[
"<div class=\"info-content\">" +
"<a href=\"<?php echo $list[$i]['href']; ?>\"><h5 class=\"ellipsis margin-bottom-10\"><strong><?php echo $list[$i]['subject']; ?></strong></h5></a>" +
<?php if($list[$i]['img_content']) { ?>
"<div class=\"gmap-canvas-img\"><div class=\"gmap-canvas-img-in\"><a href=\"<?php echo $list[$i]['href']; ?>\">" +
'<?php echo $list[$i]['img_content']; ?>' +
"</a></div></div>" +
<?php } ?>
"<div class=\"gmap-canvas-info\">" +
<?php if ($list[$i]['wr_9']) { ?>
"<p class=\"font-size-11\">- <strong>위치명</strong> : <?php echo get_text($list[$i]['wr_9'], 0); ?></p>" +
<?php } ?>
<?php if ($list[$i]['wr_10']) { ?>
"<p class=\"font-size-11\">- <strong>연락처</strong> : <?php echo get_text($list[$i]['wr_10'], 0); ?></p>" +
<?php } ?>
"<p class=\"font-size-11\">- <strong>주소</strong> : <?php echo get_text($list[$i]['wr_6'], 0); ?></p>" +
"</div>" +
"</div>"
]<?php echo $cnt != ($i+1) ? ',':''; ?>
<?php } ?>
];
var markers = [];
var clusterStyles = [
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc1.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc2.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc3.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc4.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc5.png',
height: 50,
width: 50
}
];
var mcOptions = {
styles: clusterStyles
};
var iw = new gm.InfoWindow();
for (var i = 0; i < locations.length; i++) {
var latLng = new gm.LatLng(locations[i][0], locations[i][1]);
var marker = new gm.Marker({
position: latLng,
map: map
});
markers.push(marker);
markerSpiderfier.addMarker(marker);
gm.event.addListener(marker, 'click', (function(marker, i) {
return function() {
iw.setContent(infoWindowContent[i][0]);
iw.open(map, marker);
}
})(marker, i));
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
markerCluster.setMaxZoom(config.minZoom);
}
gm.event.addDomListener(window, 'load', initialize);
$('#gm_refresh').on('click', initialize);
})();
<?php } ?>
답변 1
마커 이미지는 여기쯤 같습니다.
var clusterStyles = [
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc1.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc2.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc3.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc4.png',
height: 50,
width: 50
},
{
textColor: 'white',
url: '<?php echo EYOOM_THEME_URL; ?>/skin/board/gmap/images/mc5.png',
height: 50,
width: 50
}
];
var mcOptions = {
styles: clusterStyles
};
다른방법으로 해결하였습니다.