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


Respuestas:


11

Puede hacer esto sin ningún complemento, solo necesita la 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 coordenadas de una dirección, puede:

  1. usar manualmente un servicio (algo como esto )
  2. llame a la geocodificación de Google Maps 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 consulte este ejemplo de API de Maps para ver qué tan simple es recuperar coordenadas de una dirección.

Así que voy a asumir en esta respuesta que tienen los mensajes '' coords un campo personalizado donde se almacenan las coordenadas como una cadena de dos valores separados por comas, calle detrás como: '38.897683,-77.03649'.

También supongo que hay una plantilla de página guardada en el archivo 'page-google-map.php'.

Pon 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 la página del mapa, pongo en cola

  • el script de google map api
  • un script llamado mygmap.jsubicado en la subcarpeta 'js' del tema

Además, al hacer un bucle de las publicaciones, relleno una matriz $map_datay uso la wp_localize_scriptpaso a la js en la página.

Ahora mygmap.jscontendrá:

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_datavar. No soy un desarrollador de js y el código está más o menos enteramente tomado de aquí

Eso es todo. Simplemente cree la plantilla de página e inserte un div con el id 'mapa', algo así 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 se pueden diseñar las ventanas de información de los marcadores: en el css se usa h3.marker-titlepara diseñar el título de la ventana de información y div.marker-descel 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 página del mapa.

Espero eso ayude.


Tengo un complemento de geocodificador que agrega las coordenadas con corchetes a su alrededor a un campo personalizado. P.ej. (37.983917, 23.729359899999963)¿Dónde puedo editar el código para que pueda usar las coordenadas con corchetes a su alrededor? Mi intento simplemente falló. Gracias por esta respuesta, aunque es increíble!
stemie

2
@stemie puede cambiar $meta_coords = get_post_meta( get_the_ID(), 'coords', true );a $meta_coords = trim(get_post_meta( get_the_ID(), 'coords', true ), '()');y, por supuesto, sustituir coordsal campo real de los usos plugin para almacenar coordenadas.
gmazzap

Hola. Sé que esto es bastante antiguo, pero no he podido implementarlo con el nuevo WordPress 4.2 y la nueva API de Google Maps. ¿Hay alguien que pueda revisarlo nuevamente? Gracias.
cmsdeployed

Puedo mostrar el mapa con la posición central, pero no puedo extraer las ubicaciones de mis publicaciones y cuando veo la vista de código solo veo la posición central en el javascript que se ha producido. ¿Funcionará esto con el nuevo WordPress 4.2?
cmsdeployed

@ exedesign2 honestamente, no tengo idea. No toco este código en Google desde hace mucho tiempo ..
gmazzap
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.