javascript - Google maps custom button with standard style - Stack Overflow

admin管理员组

文章数量:1384595

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 demonstrating the solution.

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 demonstrating the solution.

• javascript
• google-maps
• button
• google-maps-api-3
• styles

Share Improve this question Follow asked Nov 17, 2013 at 16:45 Sebastian NowakSebastian Nowak 5,71799 gold badges7070 silver badges111111 bronze badges 3

• What are the buttons that you want it to look like? I would just use the developer tools in IE or Chrome and select the button you want via click and grab the css, and apply to your button – Bill Blankenship Commented Nov 17, 2013 at 19:09
• @UserSmith: The standard ones: i.imgur./0dF6hCL.png. I can't just hardcode the styles as it won't adjust when they update the API. And it's a messy solution. – Sebastian Nowak Commented Nov 17, 2013 at 19:27
• I agree it is a quick and dirty solution. If you knew the id or class associated with the button you want to mock you could essentially steal the css via jquery from that object and apply it to your button, but you would probably receive a bunch of css that you don't want. I am not sure of a solution that is going to keep you up to date for their next api version because I don't know what the new api verison will contain. – Bill Blankenship Commented Nov 17, 2013 at 20:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

<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;
}

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.

本文标签： javascriptGoogle maps custom button with standard styleStack Overflow