How to change the icon of transit stations in google maps? - google-maps

Question

I have a google map with custom styling. I would like change the appearance of the rail and bus stations icons to my own png but they do not seem to function like other markers. Is it possible to change them?

Answer 1

One option would be to hide the transit icons (or just the bus icons), and put markers of your choice in the same locations. You do then need the locations of the stops.
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: "https://www.geocodezip.net/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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>