Est-il possible d'afficher tous mes messages sur une seule carte Google?

9

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

    
posée alekone 29.05.2011 - 18:30

1 réponse

10

Vous pouvez le faire sans plug-in; vous avez uniquement besoin de la 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 à l'aide de coordonnées et non d'adresses.

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

  1. utiliser manuellement un service (quelque chose comme this )
  2. appelez Google Maps en géocodage à partir de l'administrateur WP lorsque vous créez ou mettez à jour le message

La mise en œuvre de la deuxième option n’est pas strictement liée à la question. Je ne vais pas en tenir compte pour ma réponse, mais consultez cette Exemple d'API Google Maps pour voir à quel point il est simple de récupérer les coordonnées d'une adresse.

Je suppose donc dans cette réponse que les publications ont un champ personnalisé "coords" dans lequel les coordonnées sont stockées sous la forme d'une chaîne de deux valeurs séparées par des virgules, telles que: '38.897683,-77.03649' .

Je suppose également qu'un modèle de page a été enregistré dans le fichier "page-google-map.php".

Placez 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 constater, dans le modèle de page de carte, j'ai mis en file d'attente

  • le script d'api Google Map
  • un script appelé mygmap.js situé dans le sous-dossier 'js' du thème

De plus, en bouclant les publications, je remplis un tableau $map_data et, à l'aide de wp_localize_script , je passe ce tableau au js de la page.

Maintenant, mygmap.js contiendra:

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_data var. Je ne suis pas un développeur js et le code provient plus ou moins entièrement de ici

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

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

Bien sûr, la div peut être stylée avec css, et notez que les fenêtres d’information des marqueurs peuvent également être stylées: dans le css, utilisez h3.marker-title pour styler le titre de la fenêtre d’information et div.marker-desc pour styler le contenu.

Notez que le centre de la carte est automatiquement calculé. Si vous souhaitez modifier le zoom par défaut, vous devez insérer un champ personnalisé "map_zoom" dans la page attribuée au modèle de page de carte.

J'espère que ça aide.

    
réponse donnée gmazzap 24.07.2013 - 23:20

Lire d'autres questions sur les étiquettes