<!DOCTYPE html>
<html>
<head>
    <title>Ubicación </title>
    <style>
        #map-container {
            width: 100%;
            height: 500px;
            overflow: hidden;
            position: relative;
        }
        #map {
            width: 100%;
            height: 100%;
            border: none;
        }

        .chat-icon {
    position: fixed;
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde el lado derecho */
    background-color: #3056C4;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.chat-icon:hover {
    transform: scale(1.1); /* Efecto de escala al pasar el mouse */
}
    </style>
</head>
<body>
    <h1>Ubicación </h1>
    <div id="map-container">
        <iframe
            id="map"
            width="600"
            height="450"
            frameborder="0"
            style="border:0"
            src="https://maps.app.goo.gl/kuUHY1LLmqtYutep9">
        </iframe>
    </div>
    <div class="chat-icon">
    <?php include("boticon.php") ?>
    </div>
</body>
</html>