Existe-t-il un moyen d'afficher tous mes messages sur une seule carte Google?

Je voudrais "géolocaliser" tous mes messages et les afficher sur une seule carte Google.

Peut le faire sans aucun plugin, vous n'avez besoin que de l' API Google Maps .

Veuillez noter que si vous prévoyez d'avoir 20 marqueurs ou plus sur une seule page, vous devez géolocaliser les publications en utilisant des coordonnées et non des adresses.

Pour enregistrer les coordonnées d'une adresse, vous pouvez:

1. utiliser manuellement un service (quelque chose comme ça )
2. appeler le géocodage de Google Maps à partir de WP Admin lorsque vous créez ou mettez à jour le message

Comment implémenter la deuxième option n'est pas strictement liée à la question, et je ne prendrai pas en compte ma réponse, mais consultez cet exemple d'API Maps pour voir à quel point il est simple de récupérer les coordonnées d'une adresse.

Donc je suppose dans cette réponse que les postes ont un « coords » champ personnalisé où les coordonnées sont stockées sous forme de chaîne de deux valeurs séparées par des virgules, comme someting: '38.897683,-77.03649'.

Je suppose également qu'un modèle de page est enregistré dans le fichier «page-google-map.php».

Mettez le code suivant dans 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 );
}

Comme vous pouvez le voir, dans le modèle de page de carte, je mets en file d'attente

• le script api google map
• un script appelé mygmap.jssitué dans le sous-dossier 'js' du thème

aussi, en bouclant les messages, je remplis un tableau $map_dataet en utilisant wp_localize_scriptje passe ce tableau aux js de la page.

Maintenant, mygmap.jscontiendra:

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 );

Le javascript n'est pas lié à WP, et je ne mets ici que pour montrer l'utilisation de map_datavar. Je ne suis pas développeur js et le code est plus ou moins entièrement repris d' ici

C'est tout. Créez simplement le modèle de page et insérez un div avec l'id 'map', quelque chose comme:

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

Bien sûr, le div peut être stylisé avec css, et notez que les fenêtres d'informations des marqueurs peuvent également être stylisées: dans le css, utilisez h3.marker-titlepour styliser le titre de la fenêtre d'informations et div.marker-descpour styliser le contenu.

Notez que le centre de la carte est calculé automatiquement et si vous souhaitez modifier le zoom par défaut, vous devez mettre un champ personnalisé «map_zoom» dans la page affectée au modèle de page de carte.

J'espère que cela aide.