Poner un Mapa con Bricks para Geolocalizar Contenido de WordPress

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