Apakah ada cara untuk menampilkan semua posting saya di satu Google Map?

Saya ingin "memberi geotag" pada semua posting saya dan menampilkannya di satu peta Google.

Dapat melakukan ini tanpa plugin apa pun, Anda hanya perlu Google Maps API .

Harap dicatat bahwa jika Anda berencana memiliki 20 penanda atau lebih pada satu halaman, Anda harus melakukan geolokasi posting menggunakan koordinat dan bukan alamat.

Untuk menyimpan koordinat dari suatu alamat, Anda dapat:

1. menggunakan layanan secara manual (sesuatu seperti ini )
2. panggilan Google maps geocoding dari admin WP ketika Anda membuat atau memperbarui posting

Cara menerapkan opsi kedua tidak sepenuhnya terkait dengan pertanyaan, dan saya tidak akan memperhitungkannya sebagai jawaban saya, tetapi lihat contoh Maps API ini untuk melihat bagaimana sederhananya mengambil koordinat dari suatu alamat.

Jadi saya akan menganggap dalam jawaban ini yang posting memiliki lapangan kustom 'coords' di mana koordinat disimpan sebagai string dari dua dipisahkan koma nilai-nilai, someting seperti: '38.897683,-77.03649'.

Saya juga berasumsi bahwa ada templat halaman yang disimpan dalam file 'page-google-map.php'.

Masukkan kode berikut 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 );
}

Seperti yang Anda lihat, di templat halaman peta, saya enqueue

• skrip google map api
• skrip bernama mygmap.jsterletak di subfolder 'js' dari tema

juga, mengulang posting, saya mengisi array $map_datadan menggunakan wp_localize_scriptsaya meneruskan array ini ke js di halaman.

Sekarang, mygmap.jsakan berisi:

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

Javascript tidak terkait WP, dan saya taruh di sini hanya untuk menunjukkan penggunaan map_datavar. Saya bukan pengembang js dan kode ini kurang lebih seluruhnya diambil dari sini

Itu saja. Cukup buat templat halaman dan masukkan div dengan id 'peta', sesuatu seperti:

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

Tentu saja div dapat ditata dengan css, dan perhatikan bahwa jendela info penanda juga dapat ditata: dalam css gunakan h3.marker-titleuntuk menata judul jendela info dan div.marker-descuntuk menata konten.

Perhatikan bahwa pusat peta dihitung secara otomatis dan jika Anda ingin mengubah zoom default, Anda harus meletakkan bidang khusus 'map_zoom' di halaman yang ditetapkan untuk templat halaman peta.

Semoga ini bisa membantu.