How To Change Google Maps Bus Stops Default Icon?

How to change this bus icon with javascript? It's easy to change markers and and route color and so on, but how to change this icon what is shown on a picture below?

Solution 1:

There is no API-based way to change these icons.

An option would be to use CSS, example using your avatar instead of the icon:

  /*this will hide the bus-icon*/
  img[src="https://maps.gstatic.com/mapfiles/transit/iw2/6/bus.png"]{
    width:0 !important;
  }

  /*use a custom icon as background for the span which follows the icon*/
  img[src="https://maps.gstatic.com/mapfiles/transit/iw2/6/bus.png"]+span{
    background:url(http://i.stack.imgur.com/8lcVw.png?s=32&g=1) no-repeat;
    background-size: 16px 16px;
    padding-left:18px;
  }

But it's only a workaround, it will only work as long as the markup for these tooltips or the src of the icon will not be changed.

Solution 2:

You can try this: https://developers.google.com/maps/documentation/javascript/examples/icon-complex

Creating your own custom marker in the same place.

Edit: this might work.

function changeSourceAll() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        if (images[i].src.indexOf('https://maps.gstatic.com/mapfiles/transit/iw2/6/bus.png') !== -1) {
            images[i].src = images[i].src.replace("https://maps.gstatic.com/mapfiles/transit/iw2/6/bus.png", "NEWICON.png");
        }
    }
}

changeSourceAll();