logotipo-solucion-individual-nueva-era-400
excelente valoracion
Horario de Atención Telefónica
L a V de 9:00 a 14:00 y de 17:00 a 19:00
Excepto Festivos

Poner un Mapa con Bricks para Geolocalizar Contenido de WordPress

Índice de Contenido del Artículo

En este artículo os muestro cómo implementar un mapa de Open Street Maps para que geolocalice cualquier contenido. En este ejemplo os muestro cómo geolocalizo las entradas de mi Blog y además algún campo personalizado con Advanced Custom Fields PRO.

En el siguiente vídeo os muestro mediante un ejemplo, cómo implementar un mapa de Open Street Maps con Bricks para WordPress.

Dentro de la página, editada con Bricks, donde pongáis el mapa, en Ajustes->Configuración de Página->Código Personalizado, en el apartado «Scripts de cabecera» poner el siguiente código:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css"/>
<script src="https://unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js"></script>

En el Elemento «Código» de Bricks, como hemos visto en el vídeo, ponemos el siguiente código en PHP:

<?php
$contenido="";
$contenido.='<div>'; 
// ****** MAPA ****** 
$contenido.= '<div id="map" style="width: 100%; height: 580px; box-shadow: 5px 5px 5px #888;"></div>';
$contenido.= '<script>'; 
$contenido.= 'var mapa = L.map(\'map\', {
center:[40.100,-4.019],
zoom: 6,
scrollWheelZoom: false
}); 
L.tileLayer(\'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\', {
attribution: \'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://cloudmade.com">CloudMade</a>\',maxZoom: 14}).addTo(mapa);
L.control.scale().addTo(mapa);
var marcadores= L.markerClusterGroup();';

$args = array('post_type' => array('post'),
 'posts_per_page' => '1000'
 ); 
$loop = new WP_Query( $args );
$pm_ID=0;

// ****** Loop Posts de las Entradas ****** 
while ( $loop->have_posts() ) {
$loop->the_post();
$pm_ID++;
$pm_Coordenadas=get_field('coordenadas_mapa');
if(trim($pm_Coordenadas)!=""){ // Verifica que no devuelva un valor vacio, ya que sino no muestra todas las marcas 
$pm_titulo=get_the_title(); 
$pm_NombreCompleto=get_field('nombre_completo');
$enlace=get_permalink();
$medium_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );

$contenido.= 'var marca'.$pm_ID.'= L.marker(['.trim($pm_Coordenadas).'],{draggable: false});';
$contenido.= 'marca'.$pm_ID.'.bindPopup("<h5><a href=\"'.$enlace.'\">'.$pm_titulo.'</a></h5><h5><strong>Asociado: </strong>'.$pm_NombreCompleto.'</h6><img src=\"'.$medium_image_url[0].'\">",{doubleClickZoom:true}).closePopup();'; 
$contenido.= 'marcadores.addLayer(marca'.$pm_ID.');';
$contenido.= 'mapa.addLayer(marcadores);'; 
}
}

$contenido.= '</script>'; 
$contenido.= '</div>';
echo $contenido;
?>

Solución Individual

Si necesitas el Tema Bricks para tu página Web, puedes descargarlo a un precio competitivo y con 1 año de actualizaciones, desde La Caja de Experiencia.

Quiero Descargar Bricks

No olvides suscribirte a mi canal de Youtube

suscribete youtube

Loading

avatar solind
Antonio Fernández
Apasionado por la creación de experiencias digitales. Mi objetivo es potenciar la presencia en Internet de Empresas y Marcas, mejorando su visibilidad en el mundo digital. [CEO de Solución Individual®] [SEO] [WordPress Expert]
Comparte en tus Redes Sociales:
landing-page-essential-1024x1024
¿Quieres Hacer una Factura en PDF sin complicarte con un programa de contabilidad?
redes sociales logo hacer facturaQuiero Verlo
¿Necesitas Textos Legales para tu Página Web o Tienda Online?
logo imasitioplus Textos Legales

Adapta fácilmente los Textos Legales para que tu Página Web cumpla con la LOPD (Ley Orgánica de protección de Datos), RGPD, LOPDGDD y LSSICE

Quiero Verlo
¿Necesitas Hosting para WordPress?
PULSA AQUÍ
banner-viajetravel-350px