谷歌地图具有标准样式的自定义按钮答案

【问题标题】：Google maps custom button with standard style谷歌地图具有标准样式的自定义按钮
【发布时间】：2013-11-30 18:00:57
【问题描述】：

有没有办法使用他们最新的 api 将自定义按钮添加到谷歌地图，以便它使用与其他标准按钮相同的样式？非常感谢您提供演示解决方案的示例代码。

【问题讨论】：

您希望它看起来像什么按钮？我只会使用 IE 或 Chrome 中的开发人员工具，然后通过单击选择您想要的按钮并抓取 css，然后应用到您的按钮
@UserSmith：标准的：i.imgur.com/0dF6hCL.png。我不能只对样式进行硬编码，因为它们在更新 API 时不会调整。这是一个混乱的解决方案。
我同意这是一个快速而肮脏的解决方案。如果您知道与要模拟的按钮关联的 id 或类，则基本上可以通过 jquery 从该对象中窃取 css 并将其应用于您的按钮，但您可能会收到一堆您不想要的 css。我不确定是否有一个解决方案能让您及时了解他们的下一个 api 版本，因为我不知道新的 api 版本将包含什么。

标签： javascript google-maps button google-maps-api-3 styles

【解决方案1】：

没有可以应用的默认类或其他任何东西。当 Google 地图更改样式时，您必须跟进开发并更改样式。

对于当前版本：

标记

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

当它获得默认值时，您可能需要刷新。

【讨论】：