Existe uma maneira de exibir todas as minhas postagens em um único mapa do Google?

Gostaria de "marcar geotag" todas as minhas postagens e exibi-las em um único mapa do Google.

Para fazer isso sem nenhum plug-in, você precisa apenas da API do Google Maps .

Observe que, se você planeja ter 20 marcadores ou mais em uma única página, precisa geolocalizar as postagens usando coordenadas e não endereços.

Para salvar coordenadas de um endereço, você pode:

1. usar manualmente um serviço (algo como isto )
2. chame a geocodificação do Google Maps do administrador do WP ao criar ou atualizar a postagem

Como implementar a segunda opção não está estritamente relacionada à pergunta, e não levarei em consideração a minha resposta, mas veja este exemplo da API do Google Maps para ver como é simples recuperar coordenadas de um endereço.

Então eu vou assumir neste resposta que as mensagens têm um campo personalizado 'coords', onde as coordenadas são armazenados como uma seqüência de dois valores separados por vírgula, someting como: '38.897683,-77.03649'.

Também suponho que exista 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 da página de mapa, enfileiro

• o script da API do google map
• um script chamado mygmap.jslocalizado na subpasta 'js' do tema

Além disso, em loop nas postagens, preenchei uma matriz $map_datae, usando wp_localize_scriptessa informação, passei para os js na página.

Agora, mygmap.jsconterá:

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 está relacionado ao WP, e eu coloquei aqui apenas para mostrar o uso de map_datavar. Eu não sou desenvolvedor js e o código é mais ou menos inteiramente retirado daqui

Isso é tudo. Basta criar o modelo da página e inserir uma div com o id 'map', algo como:

<div id="map" style="width:100%; height:100%"></div>

É claro que a div pode ser estilizada com css e observe que também as janelas de informações dos marcadores também podem ser estilizadas: no css, use h3.marker-titlepara estilizar o título da janela de informações e div.marker-descestilizar o conteúdo.

Observe que o centro do mapa é calculado automaticamente e se você deseja 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.