Pode fazer isso sem qualquer plug-in, você precisa apenas da API do Google Maps .
Por favor, note que se você planeja ter 20 marcadores ou mais em uma única página, você tem que geolocalizar as postagens usando coordenadas e não endereços.
Para salvar coordenadas de um endereço, você pode:
- use manualmente um serviço (algo como this )
- ligue para a geocodificação do Google Maps no WP admin quando criar ou atualizar a postagem
Como implementar a segunda opção não está estritamente relacionada à pergunta, e não a levarei em conta para minha resposta, mas veja esta exemplo da API do Google Maps para ver como é simples recuperar coordenadas de um endereço.
Então, vou assumir nesta resposta que as postagens têm um campo personalizado 'coords' onde as coordenadas são armazenadas como uma string de dois valores separados por vírgulas, algo como: '38.897683,-77.03649'
.
Eu também suponho que há um modelo de página salvo no arquivo 'page-google-map.php'.
Coloque o seguinte código em 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 você pode ver, no modelo de página do mapa, enfileiro
- o script da API do google map
- um script chamado
mygmap.js
localizado na subpasta 'js' do tema
também, fazendo o loop dos posts, eu preenchei um array $map_data
e usando wp_localize_script
eu passo este array para o js na página.
Agora, mygmap.js
conterá:
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 );
O javascript não é relacionado ao WP, e eu coloquei aqui apenas para mostrar o uso de map_data
var. Eu não sou um desenvolvedor js e o código é mais ou menos inteiramente retirado de aqui
Isso é tudo. Basta criar o modelo de página e inserir um div com o id 'map', algo como:
<div id="map" style="width:100%; height:100%"></div>
É claro que o div pode ser estilizado com css e observe que também as janelas de informações dos marcadores podem ser estilizadas: no css use h3.marker-title
para estilizar o título da janela de informações e div.marker-desc
para estilizar o conteúdo.
Observe que o centro do mapa é calculado automaticamente e, se você quiser alterar o zoom padrão, é necessário colocar um campo personalizado 'map_zoom' na página atribuída ao modelo de página do mapa.
Espero que ajude.