Google지도에서 대중 교통 역의 아이콘을 변경하는 방법은 무엇입니까?

Question

나는 사용자 정의 스타일이있는 Google지도가 있습니다. 철도 및 버스 정류장 아이콘의 모양을 내 PNG로 변경하고 싶지만 다른 표식처럼 작동하지 않는 것 같습니다. 그것들을 바꿀 수 있습니까?

Answer 1

하나의 옵션은 교통 아이콘 (또는 버스 아이콘)를 숨기고, 동일한 위치에 원하는 마커를 넣어하는 것입니다. 그런 다음 정류소 위치가 필요합니다.

proof of concept fiddle

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 53.3507456, 
 
     lng: -6.2393441 
 
    }, 
 
    zoom: 16, 
 
    mapTypeControl: false, 
 
    styles: [{ 
 
     featureType: 'transit', 
 
     elementType: 'labels.icon', 
 
     stylers: [{ 
 
     visibility: 'off' 
 
     }] 
 
    }] 
 
    }); 
 
    for (var i = 0; i < transitStops.length; i++) { 
 
    var tmark = new google.maps.Marker({ 
 
     position: transitStops[i], 
 
     map: map, 
 
     icon: { 
 
     url: "http://www.geocodezip.com/mapIcons/bus_blue.png", 
 
     scaledSize: new google.maps.Size(10, 10), 
 
     anchor: new google.maps.Point(5, 5) 
 
     } 
 
    }) 
 
    } 
 

 

 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    console.log("{placeId:" + evt.placeId + ", lat: " + evt.latLng.lat() + ", lng: " + evt.latLng.lng() + "}"); 
 
    }); 
 
} 
 
var transitStops = [{ 
 
    placeId: "ChIJP_OC240OZ0gRTwu09OWnk_U", 
 
    lat: 53.347913, 
 
    lng: -6.247165 
 
}, { 
 
    placeId: "ChIJFZJPbY0OZ0gRp8t6ffAVCWE", 
 
    lat: 53.347695, 
 
    lng: -6.243303 
 
}, { 
 
    placeId: "ChIJOd0OQI0OZ0gRUKpFv3o7AEQ", 
 
    lat: 53.347759, 
 
    lng: -6.242445 
 
}, { 
 
    placeId: "ChIJe1pTa40OZ0gR_e129---hi8", 
 
    lat: 53.347746, 
 
    lng: -6.24193 
 
}, { 
 
    placeId: "ChIJKzM8uvIOZ0gRtYKquNyaiYc", 
 
    lat: 53.347528, 
 
    lng: -6.239698 
 
}, { 
 
    placeId: "ChIJywS6evIOZ0gRhNm96pmOHlU", 
 
    lat: 53.347388, 
 
    lng: -6.236351 
 
}, { 
 
    placeId: "ChIJF-4BzfMOZ0gRkEbmpj60Ub0", 
 
    lat: 53.349668, 
 
    lng: -6.235256 
 
}, { 
 
    placeId: "ChIJQ6qDDfMOZ0gRBfF7TUP_Zi8", 
 
    lat: 53.350398, 
 
    lng: -6.238668 
 
}, { 
 
    placeId: "ChIJQ9tx_PMOZ0gRJsmjoHdrYEI", 
 
    lat: 53.351781, 
 
    lng: -6.23502 
 
}, { 
 
    placeId: "ChIJX9g7SvEOZ0gRys5vUWlD7aE", 
 
    lat: 53.352063, 
 
    lng: -6.233089 
 
}, { 
 
    placeId: "ChIJH3fLzfYOZ0gR4UOqoWvdNhw", 
 
    lat: 53.352639, 
 
    lng: -6.232402 
 
}, { 
 
    placeId: "ChIJn_6n1_YOZ0gRtovXaObKKWE", 
 
    lat: 53.352959, 
 
    lng: -6.231608 
 
}, { 
 
    placeId: "ChIJXWdle4wOZ0gRGAyVKltGjlA", 
 
    lat: 53.351128, 
 
    lng: -6.245534 
 
}, { 
 
    placeId: "ChIJ81mp4IsOZ0gROlwgkhh__eA", 
 
    lat: 53.35287, 
 
    lng: -6.248538 
 
}, { 
 
    placeId: "ChIJtanR-PAOZ0gRydiUCW5F6VE", 
 
    lat: 53.349911, 
 
    lng: -6.230235 
 
}, { 
 
    placeId: "ChIJ86GfP_QOZ0gRxuS4lSrV_EU", 
 
    lat: 53.35366366064975, 
 
    lng: -6.236715316772461 
 
}, { 
 
    placeId: "ChIJ2XaPUvQOZ0gRdutDSaj0Ko4", 
 
    lat: 53.354649828682476, 
 
    lng: -6.23798131942749 
 
}, { 
 
    placeId: "ChIJT6lqq_UOZ0gRr00DPcLv8WU", 
 
    lat: 53.35484193668282, 
 
    lng: -6.238517761230469 
 
}, { 
 
    placeId: "ChIJPWurjI8OZ0gRgRn4fsIACMc", 
 
    lat: 53.347169750741884, 
 
    lng: -6.25422477722168 
 
}, { 
 
    placeId: "ChIJpWwGCJEOZ0gRPZ-JB7vXAAU", 
 
    lat: 53.343377977116916, 
 
    lng: -6.248044967651367 
 
}, { 
 
    placeId: "ChIJW6E5POsOZ0gRhU0Mt66cLcg", 
 
    lat: 53.33979085385975, 
 
    lng: -6.2381744384765625 
 
}, { 
 
    placeId: "ChIJG4-0NcIOZ0gRbapaqYSiEm0", 
 
    lat: 53.33384581380873, 
 
    lng: -6.22899055480957 
 
}];

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>