Google Maps customizes a button with a standard style

Question

Is there a way to add a custom button to Google Maps using their latest api so that it uses the same style as other standard buttons? I would be grateful for a sample code demonstrating the solution.

Answer 1

There is no default class that you can apply or anything else. You will have to follow the development and change your style when Google Maps changes it.

For current version:

markup

<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 , .

, ( sneak )

google.maps.visualRefresh = true;

, , .