Google Maps Custom Button With Standard Style

Is there any way to add custom button to the Google Maps using their latest api, so that it will use the same style as other standard buttons? I'd be thankful for a sample code dem

Solution 1:

There's no default class that you can apply or anything else. You'll have to follow up development and change your styling when Google Maps changes it.

For the current version:

MarkUp

<divclass="gmnoprint custom-control-container"><divclass="gm-style-mtc"><divclass="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: 1px6px;
    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) 0px1px4px -1px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px1px4px -1px;
    min-width: 28px;
    font-weight: 500;
}

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

Here's a jsFiddle that does exactly this. Some of the style attributes still get applied directly by maps. What's not getting applied is cursor: pointer; and some styles might need !important as suffix so it doesn't get overridden by maps.

Keep in mind that you can already add a visual refresh (sneak preview for the new maps styles) with

google.maps.visualRefresh = true;

You might have to refresh when this gets the default.