Как я могу изменить цвет прямоугольника на обзорной карте (Google Maps v3)?

Question

Я пытаюсь изменить цвет синего прямоугольника на обзорной карте Google Maps (в нижней правой части окна Google Maps). К сожалению, в документации к Google Maps v3 об этом ничего не сказано. У вас есть идея?

Answer 1

Там нет никакого способа раскрасить там что-нибудь через API.

Что вы можете сделать: используйте JS, чтобы найти элементы, а затем используйте CSS, чтобы применить цвета.

Пример:

google.maps.event.addListenerOnce(map,'tilesloaded',function()
        {
          try{
            var x=document.querySelector('img[src=\'http://maps.gstatic.com/mapfiles/mapcontrols3d7.png\']');
            if(x)
            {
              x.parentNode.parentNode.previousSibling.className="overviewMap";
              var y=document.querySelectorAll('.overviewMap>div>div>div>div>div>div');
              y[1].className="overviewMapRectangle";
            }
          }catch(e){}
        }
        );

Единственное, что кажется уникальным - это изображение (http://maps.gstatic.com/mapfiles/mapcontrols3d7.png), это стрелка, используемая для открытия / закрытия обзорной карты. Скрипт ищет это изображение и проходит через DOM, чтобы найти прямоугольник. Он добавит класс для прямоугольника (OverviewMapRectangle), который можно использовать в качестве селектора.

Sample-CSS:

.overviewMapRectangle + div > div{border:none !important}
.overviewMapRectangle div{border-color: inherit !important}
/*border-color of the rectangle*/
.overviewMapRectangle{border-color: yellow !important}    
/*background-color of the rectangle*/
.overviewMapRectangle>div>div{background: red !important}

Демо: http://jsfiddle.net/doktormolle/ULmW5/

Проблема: Google может изменить DOM для Карт завтра, и он больше не будет работать.