안녕하세요.
항상 만들어진 스킨적용만 할줄알다가 요즘 스스로 수정을 시도하고 있는 중인데 벽에 부딪쳤습니다..
이윰 구글맵 다중마커 스킨을 사용하는중입니다.
게시판 분류에 따라 설정한 마커 이미지로 변경하고 싶은데 잘 안되네요.
아이콘에 대한 주소를 입력해주고 카테고리에 따라 마커를 지정해줘야 하는거 같은데 이 부분을 어디에 어떻게 추가하면 될까요?
빨간색부분이 추가한 부분인데 고수님들 도와주세요.
(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개 / 댓글 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
};답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.