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

9

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

    
por alekone 29.05.2011 / 18:30

1 resposta

10

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:

  1. use manualmente um serviço (algo como this )
  2. 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.

    
por gmazzap 24.07.2013 / 23:20