Gibt es eine Möglichkeit, alle meine Beiträge auf einer einzigen Google Map anzuzeigen?

9

Ich möchte alle meine Beiträge mit einem Geotag versehen und auf einer einzigen Google-Karte anzeigen.

Alekone
quelle
3
Ich denke, Sie können diese Frage lösen, indem Sie die Antworten auf " Beste Möglichkeit, eine Karte mit markierten Posts anzuzeigen? " Lesen . Wenn Sie es nach dem Lesen dieser Frage nicht lösen können, bearbeiten Sie Ihre Frage, um zu klären, was Sie versucht haben und was nicht funktioniert hat.
Jan Fabry

Antworten:

11

Wenn Sie dies ohne Plugin tun können, benötigen Sie nur die Google Maps-API .

Bitte beachten Sie, dass Sie, wenn Sie 20 oder mehr Markierungen auf einer Seite haben möchten, Beiträge anhand von Koordinaten und nicht anhand von Adressen geolokalisieren müssen.

So speichern Sie Koordinaten von einer Adresse:

  1. manuell einen Dienst verwenden (so etwas wie diese )
  2. Rufen Sie die Geokodierung von Google Maps vom WP-Administrator auf, wenn Sie den Beitrag erstellen oder aktualisieren

Die Implementierung der zweiten Option hängt nicht eng mit der Frage zusammen, und ich werde sie bei meiner Antwort nicht berücksichtigen. In diesem Beispiel der Maps-API sehen Sie jedoch, wie einfach das Abrufen von Koordinaten von einer Adresse ist.

Daher gehe ich in dieser Antwort davon aus, dass Posts ein benutzerdefiniertes Feld "Koordinaten" haben, in dem Koordinaten als Zeichenfolge aus zwei durch Kommas getrennten Werten gespeichert werden '38.897683,-77.03649'.

Ich gehe auch davon aus, dass in der Datei 'page-google-map.php' eine Seitenvorlage gespeichert ist.

Geben Sie den folgenden Code ein 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 );
}

Wie Sie sehen können, stelle ich in der Kartenseitenvorlage eine Warteschlange ein

  • das Google Map API-Skript
  • Ein Skript namens mygmap.js'js' im Unterordner des Themas

Wenn ich die Beiträge schleife, fülle ich ein Array $map_dataund wp_localize_scriptübergebe dieses Array an die js auf der Seite.

Jetzt mygmap.jswird enthalten:

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

Das Javascript ist nicht WP-bezogen, und ich habe es hier nur eingefügt, um die Verwendung von map_datavar zu zeigen . Ich bin kein js-Entwickler und der Code stammt mehr oder weniger vollständig von hier

Das ist alles. Erstellen Sie einfach die Seitenvorlage und fügen Sie ein Div mit der ID 'map' ein.

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

Natürlich kann das div mit CSS gestaltet werden, und beachten Sie, dass auch die Infofenster von Markern gestaltet werden können: Verwenden Sie im CSS h3.marker-titleden Titel des Infofensters und div.marker-descden Inhalt.

Beachten Sie, dass das Kartencenter automatisch berechnet wird. Wenn Sie den Standardzoom ändern möchten, müssen Sie ein benutzerdefiniertes Feld 'map_zoom' in die Seite einfügen, die der Kartenseitenvorlage zugewiesen ist.

Ich hoffe es hilft.

gmazzap
quelle
Ich habe ein Geocoder-Plugin, das die Koordinaten mit Klammern um sie herum zu einem benutzerdefinierten Feld hinzufügt. Z.B. (37.983917, 23.729359899999963)Wo kann ich den Code bearbeiten, damit die Koordinaten mit Klammern um sie herum verwendet werden können? Mein Versuch ist einfach fehlgeschlagen. Vielen Dank für diese Antwort, obwohl es super ist!
Stemie
2
@stemie Sie ändern können $meta_coords = get_post_meta( get_the_ID(), 'coords', true );zu $meta_coords = trim(get_post_meta( get_the_ID(), 'coords', true ), '()');und natürlich ersetzen coordsdie Plugin - Anwendungen zum Speichern von Koordinaten auf das tatsächliche Feld.
gmazzap
Hallo. Ich weiß, dass dies ziemlich alt ist, aber ich konnte es mit dem neuen WordPress 4.2 und der neuen Google Maps-API nicht implementieren. Gibt es jemanden, der es noch einmal überprüfen kann? Vielen Dank.
cmsdeployed
Ich kann die Karte mit der Mittelposition anzeigen, aber ich kann sie nicht an den Positionen meiner Beiträge abrufen. Wenn ich die Codeansicht ansehe, sehe ich nur die Mittelposition im erstellten Javascript. Funktioniert das mit dem neuen WordPress 4.2?
cmsdeployed
@ exedesign2 ehrlich gesagt habe ich keine ahnung. Ich berühre diesen Code seit langer Zeit nicht mehr bei Google.
gmazzap