How to change the icon of transit stations in 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

一种选择是隐藏交通图标（或仅隐藏公交车图标），并将您选择的标记放在相同的位置。然后你需要停靠点的位置。

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>