Me gustaría "geoetiquetar" todas mis publicaciones y mostrarlas en un solo mapa de Google.
Me gustaría "geoetiquetar" todas mis publicaciones y mostrarlas en un solo mapa de Google.
Respuestas:
Puede hacer esto sin ningún complemento, solo necesita la API de Google Maps .
Tenga en cuenta que si planea tener 20 marcadores o más en una sola página, debe geolocalizar las publicaciones utilizando coordenadas y no direcciones.
Para guardar coordenadas de una dirección, puede:
La forma de implementar la segunda opción no está estrictamente relacionada con la pregunta, y no la tendré en cuenta para mi respuesta, pero consulte este ejemplo de API de Maps para ver qué tan simple es recuperar coordenadas de una dirección.
Así que voy a asumir en esta respuesta que tienen los mensajes '' coords un campo personalizado donde se almacenan las coordenadas como una cadena de dos valores separados por comas, calle detrás como: '38.897683,-77.03649'
.
También supongo que hay una plantilla de página guardada en el archivo 'page-google-map.php'.
Pon el siguiente código en functions.php
add_action( 'wp_enqueue_scripts', 'enqueue_gmap' );
function enqueue_gmap() {
// script goes only in the map page template
if ( ! is_page_template('page-google-map.php') ) return;
wp_register_script( 'google-maps-api', '//maps.google.com/maps/api/js?sensor=false', false, false );
wp_register_script( 'posts_map', get_template_directory_uri().'/js/mygmap.js', false, false, true );
wp_enqueue_script( 'google-maps-api' );
wp_enqueue_script( 'posts_map' );
// use a custom field on the map page to setup the zoom
global $post;
$zoom = (int) get_post_meta( $post->ID, 'map_zoom', true );
if ( ! $zoom ) $zoom = 6;
$map_data = array(
'markers' => array(),
'center' => array( 41.890262, 12.492310 ),
'zoom' => $zoom,
);
$lats = array();
$longs = array();
// put here your query args
$map_query = new WP_Query( array( 'posts_per_page' => -1, ) );
// Loop
if ( $map_query->have_posts() ) :
while( $map_query->have_posts() ) : $map_query->the_post();
$meta_coords = get_post_meta( get_the_ID(), 'coords', true );
if ( $meta_coords ) {
$coords = array_map('floatval', array_map( 'trim', explode( ",", $meta_coords) ) );
$title = get_the_title();
$link = sprintf('<a href="%s">%s</a>', get_permalink(), $title);
$map_data['markers'][] = array(
'latlang' => $coords,
'title' => $title,
'desc' => '<h3 class="marker-title">'.$link.'</h3><div class="marker-desc">'.get_the_excerpt().'</div>',
);
$lats[] = $coords[0];
$longs[] = $coords[1];
}
endwhile;
// auto calc map center
if ( ! empty( $lats ) )
$map_data['center'] = array(
( max( $lats ) + min( $lats ) ) /2,
( max( $longs ) + min( $longs ) ) /2
);
endif; // End Loop
wp_reset_postdata;
wp_localize_script( 'posts_map', 'map_data', $map_data );
}
Como puede ver, en la plantilla de la página del mapa, pongo en cola
mygmap.js
ubicado en la subcarpeta 'js' del temaAdemás, al hacer un bucle de las publicaciones, relleno una matriz $map_data
y uso la wp_localize_script
paso a la js en la página.
Ahora mygmap.js
contendrá:
function map_initialize() {
var map_div = document.getElementById( 'map' );
map_markers = map_data.markers,
map_center = new google.maps.LatLng( map_data.center[0], map_data.center[1] ),
map_zoom = Number( map_data.zoom ),
map = new google.maps.Map( document.getElementById( 'map' ), {
zoom : map_zoom,
center : map_center,
mapTypeId : google.maps.MapTypeId.ROADMAP
} );
if ( map_markers.length ) {
var infowindow = new google.maps.InfoWindow(),
marker,
i;
for ( i = 0; i < map_markers.length; i++ ) {
marker = new google.maps.Marker( {
position : new google.maps.LatLng(
map_markers[i]['latlang'][0],
map_markers[i]['latlang'][1]
),
title : map_markers[i]['title'],
map : map
} );
google.maps.event.addListener( marker, 'click', ( function( marker, i ) {
return function() {
infowindow.setContent( map_markers[i]['desc'] );
infowindow.open( map, marker );
}
} )( marker, i ) );
}
}
};
google.maps.event.addDomListener( window, 'load', map_initialize );
El javascript no está relacionado con WP, y lo puse aquí solo para mostrar el uso de map_data
var. No soy un desarrollador de js y el código está más o menos enteramente tomado de aquí
Eso es todo. Simplemente cree la plantilla de página e inserte un div con el id 'mapa', algo así como:
<div id="map" style="width:100%; height:100%"></div>
Por supuesto, el div se puede diseñar con css, y tenga en cuenta que también se pueden diseñar las ventanas de información de los marcadores: en el css se usa h3.marker-title
para diseñar el título de la ventana de información y div.marker-desc
el contenido.
Tenga en cuenta que el centro del mapa se calcula automáticamente y, si desea cambiar el zoom predeterminado, debe colocar un campo personalizado 'map_zoom' en la página asignada a la plantilla de página del mapa.
Espero eso ayude.
(37.983917, 23.729359899999963)
¿Dónde puedo editar el código para que pueda usar las coordenadas con corchetes a su alrededor? Mi intento simplemente falló. Gracias por esta respuesta, aunque es increíble!
$meta_coords = get_post_meta( get_the_ID(), 'coords', true );
a $meta_coords = trim(get_post_meta( get_the_ID(), 'coords', true ), '()');
y, por supuesto, sustituir coords
al campo real de los usos plugin para almacenar coordenadas.