Me gustaría "etiquetar geográficamente" todas mis publicaciones y mostrarlas en un solo mapa de Google.
Me gustaría "etiquetar geográficamente" todas mis publicaciones y mostrarlas en un solo mapa de Google.
Puede hacer esto sin ningún complemento, solo necesita el 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 las coordenadas de una dirección, puedes:
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 vea esto Ejemplo del API de Google Maps para ver qué tan sencillo es recuperar las coordenadas de una dirección.
Por lo tanto, asumiré en esta respuesta que las publicaciones tienen un campo personalizado 'coords' donde las coordenadas se almacenan como una cadena de dos valores separados por comas, algo así como: '38.897683,-77.03649'
.
También asumo que hay una plantilla de página guardada en el archivo 'page-google-map.php'.
Coloque 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 página del mapa, encolado
mygmap.js
ubicada en la subcarpeta 'js' del tema también, haciendo un bucle de las publicaciones, relleno una matriz $map_data
y usando wp_localize_script
paso esta matriz 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á tomado en su totalidad de aquí
Eso es todo. Simplemente cree la plantilla de página e inserte un div con el id 'map', algo 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 las ventanas de información de los marcadores también se pueden diseñar: en css use h3.marker-title
para aplicar estilo al título de la ventana de información y div.marker-desc
para personalizar 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 la página del mapa.
Espero que ayude.
Lea otras preguntas en las etiquetas geo-data google-maps