HTML 地图按钮：无标题正方形按钮显示地点名称

以下是一段 HTML 代码，生成了一张有五个地点按钮的地图：

<!DOCTYPE html>
<html>
<head>
<style>
    .map {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        width: 300px;
        margin: 0 auto;
    }
    
    .location {
        width: 80px;
        height: 80px;
        background-color: lightgray;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .location:hover {
        background-color: gray;
    }
    
    .location span {
        display: none;
        color: white;
    }
    
    .location:hover span {
        display: block;
    }
</style>
</head>
<body>
    <div class='map'>
        <div class='location'><span>公园</span></div>
        <div class='location'><span>医院</span></div>
        <div class='location'><span>家</span></div>
        <div class='location'><span>公司</span></div>
        <div class='location'><span>商场</span></div>
    </div>
</body>
</html>

这段代码使用了 CSS 的 Grid 布局来创建一个网格，每个网格对应一个地点按钮。按钮使用灰色背景，并且没有具体的名称显示。当鼠标悬停在按钮上时，按钮的背景颜色会变为灰色，同时显示对应地点的名称。