在谷歌地图上添加关闭按钮并跳转页面

当我们在谷歌地图上显示某一个地点的信息时，有时候我们需要一个关闭按钮，以便用户可以轻松返回到其他页面。通过使用HTML和JavaScript，我们可以很容易地在谷歌地图上添加一个关闭按钮，并在点击该按钮时跳转到其他页面。

示例代码

HTML部分：

<!--在你的HTML文件中引入以下HTML代码-->
<div id="map"></div>
<button id="close-button">关闭地图</button>

JavaScript部分：

// Google Maps API异步加载 
function initMap() {
    // 创建地图
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.0522, lng: -118.2437 },
        zoom: 10
    });
    
    // 创建关闭按钮的事件监听器
    var closeButton = document.getElementById('close-button');
    closeButton.addEventListener('click', function () {
        // 跳转到另一个页面
        window.location.href = "http://example.com";
    });
}

实现步骤

1.在HTML文件中创建一个div元素来保存你的地图。

<div id="map"></div>

2.添加一个关闭按钮。

<button id="close-button">关闭地图</button>

3.使用Google Maps API异步加载，创建地图并添加到div元素中。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.0522, lng: -118.2437 },
        zoom: 10
    });
}

4.创建一个事件监听器，使关闭按钮能够在点击时跳转到其他页面。

var closeButton = document.getElementById('close-button');
closeButton.addEventListener('click', function () {
    window.location.href = "http://example.com";
});

注意事项

• 要在HTML文件中引入Google Maps API的JavaScript代码。
• 要在HTML文件中引入本例中的JavaScript代码，或者把它存储到一个单独的JavaScript文件中并引用它。
• 必须在用户单击关闭按钮时跳转到某个页面。在本例中，我们使用window.location.href来实现跳转。你可以将其替换为你想要跳转到的页面的URL。

参考资料

• Google Maps JavaScript API
• JavaScript Window Location