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

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

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.