Google maps custom button со стандартным стилем

Есть ли способ добавить пользовательскую кнопку на Карты Google, используя их новейшую api, чтобы она использовала тот же стиль, что и другие стандартные кнопки? Я был бы благодарен за образец кода, демонстрирующий решение.Google maps custom button со стандартным стилем

источник

2013-11-17 Sebastian Nowak

Какими кнопками вы хотите выглядеть? Я просто использовал инструменты разработчика в IE или Chrome и выберет нужную кнопку с помощью щелчка и возьму css и применим к вашей кнопке –

@UserSmith: Стандартные: http://i.imgur.com/0dF6hCL.png , Я не могу просто жестко задавать стили, поскольку он не будет настраиваться при обновлении API. И это грязное решение. –

Я согласен, что это быстрое и грязное решение. Если вы знали идентификатор или класс, связанный с кнопкой, которую вы хотите высмеять, вы могли бы по сути украсть css через jquery из этого объекта и применить его к вашей кнопке, но вы, вероятно, получите кучу css, который вам не нужен. Я не уверен в решении, которое будет держать вас в курсе их следующей версии api, потому что я не знаю, что будет содержать новый api verison. –

Нет класса по умолчанию, который вы можете применить или что-то еще. Вам придется следить за развитием и изменять свой стиль, когда Google Maps меняет его.

Для текущей версии:

разметке

<div class="gmnoprint custom-control-container"> 
    <div class="gm-style-mtc"> 
     <div class="custom-control" title="Click to set the map to Home">Home</div> 
    </div> 
</div>

CSS

.custom-control-container { 
    margin: 5px; 
} 
.custom-control { 
    cursor: pointer; 
    direction: ltr; 
    overflow: hidden; 
    text-align: center; 
    position: relative; 
    color: rgb(0, 0, 0); 
    font-family: "Roboto", Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 11px !important; 
    background-color: rgb(255, 255, 255); 
    padding: 1px 6px; 
    border-bottom-left-radius: 2px; 
    border-top-left-radius: 2px; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid rgba(0, 0, 0, 0.14902); 
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; 
    min-width: 28px; 
    font-weight: 500; 
} 

.custom-control:hover { 
    font-weight: 900 !important; 
}

Вот jsFiddle, что делает именно это. Некоторые атрибуты стиля по-прежнему применяются непосредственно к картам. То, что не применяется, - cursor: pointer;, и некоторые стили могут нуждаться в !important в качестве суффикса, чтобы он не переопределялся картами.

Имейте в виду, что вы уже можете добавить визуальный обновление (предварительный просмотр фильма для новых карт стилей) с

google.maps.visualRefresh = true;

Вы, возможно, придется обновить, когда это становится по умолчанию.

источник

2013-11-18 09:04:17 kaiser

Google maps custom button со стандартным стилем

ответ

Смежные вопросы