¿Hay alguna forma de mostrar todas mis publicaciones en un solo mapa de Google?

9

Me gustaría "etiquetar geográficamente" todas mis publicaciones y mostrarlas en un solo mapa de Google.

    
pregunta alekone 29.05.2011 - 18:30

1 respuesta

10

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:

  1. utiliza manualmente un servicio (algo como this )
  2. llame a Google maps geocoding desde el administrador de WP cuando cree o actualice la publicación

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

  • el script de google map api
  • una secuencia de comandos llamada 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.

    
respondido por el gmazzap 24.07.2013 - 23:20

Lea otras preguntas en las etiquetas