gmap 스킨에서 마커 변경방법 문의드립니다. > 시즌3 질문과 답변

본문 바로가기

시즌3 질문과답변

[해결중] gmap 스킨에서 마커 변경방법 문의드립니다.

  • - 별점 : 평점
  • - [ 0| 참여 0명 ]

본문

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

 

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

 

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

 

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

 

감사드립니다.

0 0
로그인 후 추천 또는 비추천하실 수 있습니다.
포인트 20
경험치 805
[레벨 3] - 진행률 35%
가입일
2017-11-02 12:55:33
서명
미입력
자기소개
미입력

최신글이 없습니다.

최신글이 없습니다.

댓글목록2

이윰MOUNT님의 댓글

profile_image
콜라님 안녕하세요.
해당 스킨의 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포인트를 획득하였습니다.

콜라님의 댓글의 댓글

profile_image
네 잘되네요^^
감사합니다.
이윰빌더 시즌4 질문과 답변 게시판입니다.

질문과 답변 게시판에는 가능한 이윰 관리자가 답변을 드리지 않습니다. 회원간 활성화 될수 있도록 도움 부탁드리며, 질문자는 원하는 답변이 달릴경우 꼭 채택하여 주시기 바랍니다.

상품구매 및 유료상품 문의는 1:1문의 게시판을 이용해 주시기 바랍니다.

1:1문의 바로가기 : https://eyoom.net/bbs/qalist.php

전체 12 건 - 1 페이지
번호
제목
글쓴이
채택포인트
별점
사이트 내 전체검색