Personalización de Componente ubicacion

Este componente permite visualizar la ubicación del inmueble en un mapa interactivo con pestañas que alternan entre el mapa Leaflet y Google Street View.

---

🖼️ Ejemplo Visual #

---

📁 Ruta del Componente para Personalizar #

Ubicación en el plugin:

bashCopiarEditarcomponentes/detalleInmueble/ubicacion.php

Ruta para sobrescribirlo en tu tema hijo:

CopiarEditarvisualinmueble/
├── templates/
│   └── inmuebles/
│       └── componentes/
│           └── detalleInmueble/
│               └── ubicacion.php

---

🧩 Código Base #

<!--- <h3 class="visualinmueble-titulos-ubicacion">Ubicación de <?php // echo $nombre; ?></h3> ---->
<section>
<?php visualinmu_load_template("inmuebles/componentes/detalleinmueble/ubicacion-header.php",["mapa" => $mapa]);?>
    <ul class="nav nav-pills mb-3 tabs-media" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <button onclick="gtag('event', 'prop_mapa_tab', {
    'origin': 'property_ubicacion',
    'label': 'Mapa inmueble',
    'value': '<?php echo $nombre; ?>' // Este valor puede ser un número
  });" class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#mapa" type="button"
                role="tab" aria-controls="mapa" aria-selected="true">
                <i class="icon icon-uniE9C1"></i> Mapa
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button onclick="gtag('event', 'prop_streeview_tab', {
    'origin': 'property_ubicacion',
    'label': 'Mapa inmueble',
    'value': '<?php echo $nombre; ?>' // Este valor puede ser un número
  });" class="nav-link" id="pills-street-view-tab" data-bs-toggle="pill" data-bs-target="#street-view" type="button"
                role="tab" aria-controls="street-view" aria-selected="true">
                <i class="icon icon-uniE91B"></i> Street View</a>
            </button>
        </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="mapa" role="tabpanel" aria-labelledby="mapa-tab">
            <?php visualinmu_load_template("inmuebles/componentes/search/mapa.php", ["inmuebles" => $mapa['propiedadesSimilares']]); ?>
        </div>
        <div class="tab-pane fade" id="street-view" role="tabpanel" aria-labelledby="street-view-tab">
            <iframe
                src="https://www.google.com/maps/embed?pb=!4v1638990616651!6m8!1m7!1toZz0mw!2m2!1d<?php echo $mapa['latitud']; ?>!2d<?php echo $mapa['longitud']; ?>!3f90!4f0!5f0.7820865974627469"
                style="border:0; width: 100%; height: 60vh;" allowfullscreen="" loading="lazy"></iframe>
        </div>
    </div>
</section>

---

🎨 ¿Qué puedes personalizar? #

Elemento	¿Se puede personalizar?	Cómo hacerlo
Título superior	✅ (comentado en el código)	Descomentar o reemplazar el <h3>
Íconos de pestañas	✅	Cambia las clases icon-uniE9C1 y icon-uniE91B
Colores de botones/tab	✅	Usa clases de Bootstrap (nav-link, active) o añade clases propias
Estilo del mapa (Leaflet)	✅	Edita mapa.php incluido desde search/mapa.php
Street View de Google	✅	Modifica el iframe embebido o su estilo (height, border)
Mapa dinámico con marcadores	✅	Se alimenta con propiedadesSimilares, puedes customizar esa lógica
Etiquetas de pestañas	✅	Cambia el texto "Mapa" y "Street View" directamente

---

⚠️ Restricciones #

Elemento	¿Se puede?	Notas
Cambiar motor de mapa (ej. Google Maps en vez de Leaflet)	🚫 (por defecto)	Requiere reescribir lógica interna y API
Cambiar orden de pestañas dinámicamente	🚫	Está fijo en el HTML, pero puedes mover manualmente
Personalización de propiedadesSimilares	⚠️	Está ligada al plugin, podrías sobrescribir mapa.php para modificar su visualización

---

💡 Tips adicionales #

• Añadir estilos personalizados con clases como .tabs-media para adaptar a la estética de tu sitio.
• Agrega una leyenda o tooltip si quieres contextualizar el punto del mapa.
• Puedes ocultar Street View si no hay coordenadas válidas o si no es necesario.
• La función visualinmu_load_template() te permite mantener el código limpio dividiendo el componente en partes reutilizables.