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

9

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

alekone
la source
3
Je pense que vous pouvez résoudre cette question en lisant les réponses à "La meilleure façon d'afficher la carte des messages balisés? ". Si vous ne pouvez pas le résoudre après avoir lu cette question, veuillez modifier votre question pour clarifier ce que vous avez essayé et ce qui n'a pas fonctionné.
Jan Fabry

Réponses:

11

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.

gmazzap
la source
J'ai un plugin de géocodeur qui ajoute les cordons avec des bracelets autour d'eux à un champ personnalisé. Par exemple. (37.983917, 23.729359899999963)où puis-je éditer le code afin qu'il puisse utiliser les cordons avec des supports autour d'eux. Ma tentative a échoué. Merci pour cette réponse mais c'est génial!
stemie
2
@stemie vous pouvez changer $meta_coords = get_post_meta( get_the_ID(), 'coords', true );à $meta_coords = trim(get_post_meta( get_the_ID(), 'coords', true ), '()');et bien sûr, remplacer coordsle champ réel des utilisations du plugin pour les coordonnées du magasin.
gmazzap
Salut. Je sais que c'est assez vieux, mais je n'ai pas pu l'implémenter avec le nouveau WordPress 4.2 et la nouvelle API Google Maps. Y a-t-il quelqu'un qui peut le revoir? Merci.
cmsdeployed
Je suis en mesure d'afficher la carte avec la position centrale, mais je ne suis pas en mesure de tirer les emplacements de mes messages et lorsque je regarde la vue de code, je ne vois que la position centrale dans le javascript qui a été produit. Est-ce que cela fonctionnera avec le nouveau WordPress 4.2?
cmsdeployed
@ exedesign2 honnêtement, je n'en ai aucune idée. Je ne touche plus à ce code depuis Google depuis longtemps ..
gmazzap