Google Map JavaScript APIのcustom markerの画像にスタイルを適用させたい

やりたいこと

google map javascript apiのcustom markerで任意の画像をアイコンとして設定する際に、画像に対し自分で設定したstyleを適用させたい。
デザインを自由に指定するためにcustom overlaysを使う方法もあるが、markerでなんとかしたかった。

以下の方法で実現した。

1.それぞれのmarkerに固定の画像を使う場合

marker = new google.maps.Marker(
  {
    map: map,
    position: latlng,
    icon: {
      url: 'gazo.png'
      scaledSize: new google.maps.Size(50, 50)
    },
  }
);

img[src="gazo.png"]{
  border: 2px solid #939598;
  border-radius:50%;
}

2.markerごとに異なる画像を使う場合

marker = new google.maps.Marker(
  {
    map: map,
    position: latlng,
    icon: {
      url: 'gazo.png(markerごとに違う画像)' + '#custom_marker', #ここでセレクタを設定する
      scaledSize: new google.maps.Size(50, 50)
    },
  }
);

img[src$="#custom_marker"]{
  border: 2px solid #939598;
  border-radius:50%;
}

注意することは、マーカーの最適化。
デフォルトだとgoogle map api側でマーカーの最適化を行うかどうかを判断してくれる。
アイコンの量が少ない場合はおそらく問題ないが、アイコンの量が増えるなどするとapi側でマーカーの最適化が必要だと判断し、最適化されることによって設定したstyleが効かなくなる。

対処方法としては、markerを作る際に、optimaized: falseを指定すると最適化されないよう強制できる。(ただできればやりたくない)

参考

https://stackoverflow.com/questions/46416883/how-add-circle-shape-in-google-maps-custom-icon
https://developers.google.com/maps/documentation/javascript/markers