질문과 답변

최근본상품
TOP
DOWN

질문과 답변

gmap 스킨에서 마커 변경방법 문의드립니다.

0
0
총 채택 포인트 10 포인트
채택된 회원에게 주는 후원 포인트 8 포인트
채택 후 작성자(콜라) 회수 포인트 2 포인트

본문

도움주신 덕에 차츰 자리를 잡아가고 있습니다.

 

이번에는 gmap 스킨에서 보이는 google맵의 마커를 변경해보고자 하는데 방법이 있는지요?

 

google 마커가 좀 올드해서 바꾸어 보고자 합니다.

 

더불어 마커가 모였을 때 숫자로 표현해 주는 부분도 변경이 가능하다면 변경하고 싶은데 가능한지 모르겠네요

 

감사드립니다.

- 콜라 - 회원등급 : 지하계 / Level 3
포인트 625
경험치 756
[레벨 3] - 진행률 26%
- 가입일 : 2017-11-02 12:55:33
- 서명 : 미입력
- 자기소개 : 미입력

댓글목록 2

이윰MOUNT님의 댓글

채택

콜라님 안녕하세요.
해당 스킨의 list.skin.html 파일 478~491라인 정도에 아래 소스를 참고해 보시기 바랍니다.

변경전


	var markers = [];
	var infoWindow = new google.maps.InfoWindow(), locations, i;
	for (var i = 0; i < locations.length; i++) {
		var latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
		var marker = new google.maps.Marker({'position': latLng});
		markers.push(marker);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
	}
	var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m'});


변경후

    var markers = [];
	var icon = {
	    url: "path/to/pin.png"
	};
	var clusterStyles = [
	  {
	    textColor: 'white',
	    url: 'path/to/smallclusterimage.png',
	    height: 50,
	    width: 50
	  },
	 {
	    textColor: 'white',
	    url: 'path/to/mediumclusterimage.png',
	    height: 50,
	    width: 50
	  },
	 {
	    textColor: 'white',
	    url: 'path/to/largeclusterimage.png',
	    height: 50,
	    width: 50
	  }
	];
	var mcOptions = {
	    styles: clusterStyles
	};
	var infoWindow = new google.maps.InfoWindow(), locations, i;
	for (var i = 0; i < locations.length; i++) {
		var latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
		var marker = new google.maps.Marker({
			'position': latLng,
			'icon' : icon
		});
		markers.push(marker);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
	}
	var markerCluster = new MarkerClusterer(map, markers, mcOptions);


위 소스에서 png 이미지 경로를 상대경로 설정하시면 되겠습니다.

감사합니다.

축하합니다. 첫댓글 포인트 49포인트를 획득하였습니다.

콜라님의 댓글

콜라 2017.11.08 10:53

네 잘되네요^^
감사합니다.

질문과 답변 (채택기능) 게시판이 신설되었습니다.
질문과 답변 (구) 게시판은 글쓰기가 제한되오니 착오 없으시길 바랍니다. (댓글 및 조회는 여전히 가능합니다.)
채택포인트 : 최소 10 포인트 ~ 최대 1,000 포인트 설정하실 수 있습니다.
빠른 답변을 원하신다면 채택포인트를 높게 설정해 보세요. ^^

전체 651 건 - 1 페이지
제목
미해결
0
0p
포운한 2019.03.11
미해결
0
10p
진호 2024.04.25
미해결
0
0p
포운한 2019.03.09
미해결
0
0p
포운한 2019.03.08
미해결
0
500p
장유나 2018.10.05
미해결
0
10p
인졀미 2018.08.13
미해결
2
0p
cosmos 2018.08.10
미해결
0
10p
ha 2018.08.09
미해결
1
10p
히스토리 2018.08.08
미해결
0
10p
비사소 2018.08.07
미해결
3
10p
비사소 2018.08.05
미해결
0
100p
슈프림롤업 2018.08.05
미해결
1
10p
우주선생 2018.08.03
해결
1
10p
ha 2018.08.03
미해결
2
10p
이윰초보임당 2018.08.01