CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Kert Kukk
Kert Kukk

Reputation: 715

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?

How to change this icon?

Upvotes: 2

Views: 1887

Answers (2)

Kars Barendrecht
Kars Barendrecht

Reputation: 549

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();

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117334

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(https://i.sstatic.net/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.

Upvotes: 1

Related Questions