Google maps 在谷歌地图上放一个按钮

我想在谷歌地图上的地图旁边放一个按钮，卫星和混合按钮

我想知道这是否可能，最好的方法是什么

因此，我的想法是在谷歌地图上覆盖一个可以点击的图像，但不确定这是否会将所有事件从谷歌地图上移除

---

你对如何做到这一点有什么想法吗？

对如何做到这一点有很好的描述

我很确定你可以把这些家伙设计成标准的纽扣，你也可以把它固定在右上角。当我有机会的时候，我会尝试一下并更新我的结果

更新：

我有机会尝试一下，效果不错：

---

基本上，您最终会执行非常类似的操作，使用GControl实现按钮，或者只使用DIV在地图上的绝对定位（如建议的）。所以我不认为有正确（或更容易）的方法，这只是个人偏好的问题。祝你好运。

为了补充Cannonade的答案，这里是谷歌地图控件使用的html/css。您可以复制css，使其看起来像真实的东西

你可以创建一个正式的GControl，或者你可以把它们放在谷歌地图上，绝对定位

活动按钮：

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map">
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;">
        Map
    </div>
</div>

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names">
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">
        Hybrid
    </div>
</div>

地图

非活动按钮：

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map">
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;">
        Map
    </div>
</div>

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names">
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">
        Hybrid
    </div>
</div>

混合的

---

---

更新：谷歌地图实用程序库中还有一个扩展可以实现这一点-

我也遇到了同样的问题，我就是这样做的，创建了一个按钮，并给它下面的样式

id=“我的按钮”

---

被接受的答案来自2009年（5年前），并链接到一个不推荐使用的谷歌地图API版本

在搜索同一个问题时，我发现了以下示例：

---

使用jQuery时，看起来是这样的： 首先，创建一个函数，它将返回您的元素

function myButton(){
    var btn = $('<div class="my-button"></div>');
    btn.bind('click', function(){
        // logic here...
        alert('button clicked!');
    });
    return btn[0];
}

---

+1谢谢克里斯；），这帮我节省了一些时间来研究如何塑造这些家伙。我以前去过绝对位置路线，所以我对尝试GControl很感兴趣。有机会的时候我会发回的。谢谢我尝试了这个机制，它在我的测试中运行得很好，但最后我使用了GControl机制，因为我不必担心地图的具体位置。@Cannonade-没问题-我只是直接从Firebug中复制了它。我相信谷歌控制方法是最安全的。我已经通过该机制创建了一个控件，它工作得最好，因为另一种方法需要绝对定位，在我的例子中，我无法对地图进行绝对定位。上面的链接是针对v2的，目前已弃用（当前版本是v3）。现在可以在这里找到同一主题的相关链接：当我选择全屏地图模式时，我看不到按钮。谷歌更新：用于在地图上放置按钮

map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());