Poner un Mapa con Bricks para Geolocalizar Contenido de WordPress

  • Comentarios de la entrada:Sin comentarios
  • Tiempo de lectura:4 minutos de lectura

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' => 'Post');
$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);'; 
}
endwhile; 

$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


Comparte en tus Redes Sociales:

Deja una respuesta

Los datos de carácter personal que consten en el comentario serán tratados por Solución Individual con la finalidad de publicar tu comentario así como enviarte a posteriori información comercial de aquellos productos o servicios que puedan ser de tu interés. La legitimación del tratamiento es tu consentimiento. Tus datos no serán cedidos a terceros. Tienes derecho a acceder, rectificar y suprimir tus datos, así como otros derechos como se explica en nuestra Política de Privacidad y Protección de datos