Tüm yayınlarımı tek bir Google Haritası'nda göstermenin bir yolu var mı?

Tüm yayınlarıma "coğrafi etiket eklemek" ve bunları tek bir Google haritasında görüntülemek istiyorum.

Bunu herhangi bir eklenti olmadan yapabilir , yalnızca Google Haritalar API'sına ihtiyacınız vardır .

Tek bir sayfada 20 veya daha fazla işaretçi kullanmayı planlıyorsanız, adresleri değil koordinatları kullanarak yayınları coğrafi olarak konumlandırmanız gerektiğini lütfen unutmayın.

Bir adresten koordinatları kaydetmek için şunları yapabilirsiniz:

1. El ile bir hizmeti kullanmak (gibi bir şey bu )
2. yayını oluştururken veya güncellerken Google Haritalar coğrafi kodlamasını WP yöneticisinden arayın

İkinci seçeneğin nasıl uygulanacağı soru ile kesinlikle ilgili değildir ve cevabım için bunu dikkate almayacağım, ancak bir adresten koordinatları almanın ne kadar basit olduğunu görmek için bu Haritalar API'sı örneğine bakın.

Ben mesajlar iki virgül dize gibi Someting, ayrılmış değerler olarak koordinatlar saklandığı özel bir alanın 'Coords' olduğunu bu yanıtında üstlenecek Yani: '38.897683,-77.03649'.

Ayrıca 'page-google-map.php' dosyasına kaydedilmiş bir sayfa şablonu olduğunu da varsayalım.

Aşağıdaki kodu 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 );
}

Gördüğünüz gibi, harita sayfası şablonunda enqueue

• google harita api betiği
• mygmap.jstemanın 'js' alt klasöründe bulunan bir komut dosyası

Ayrıca, mesajları döngü, ben bir dizi doldurmak $map_datave kullanarak wp_localize_scriptben bu diziyi sayfadaki js geçmek.

Şimdi mygmap.jsşunları içerecek:

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 WP ile ilgili değil ve ben sadece map_datavar kullanımını göstermek için buraya koydu . Ben bir js geliştirici değilim ve kod az ya da çok tamamen buradan alınır

Bu kadar. Sadece sayfa şablonunu oluşturun ve 'map' kimliğine sahip bir div ekleyin:

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

Tabii ki div css ile şekillendirilebilir ve işaretleyicilerin bilgi pencerelerinin de stilize edilebileceğini unutmayın: css'de h3.marker-titlebilgi penceresi başlığını ve div.marker-desciçeriği şekillendirmek için kullanın .

Harita merkezinin otomatik olarak hesaplandığını ve varsayılan yakınlaştırmayı değiştirmek istiyorsanız, harita sayfası şablonuna atanan sayfaya özel bir 'map_zoom' alanı koymanız gerektiğini unutmayın.

Umarım yardımcı olur.