하나의 Google지도에 모든 게시물을 표시하는 방법이 있습니까?

모든 게시물을 "위치 정보 태그 지정"하고 단일 Google지도에 표시하고 싶습니다.

플러그인 없이이 작업을 수행 할 수 있습니다 . Google Maps API 만 있으면됩니다 .

한 페이지에 마커가 20 개 이상인 경우 주소가 아닌 좌표를 사용하여 게시물을 위치 지정해야합니다.

주소에서 좌표를 저장하려면 다음을 수행하십시오.

1. 수동으로 서비스를 사용하십시오 (이와 같은 것 )
2. 게시물을 만들거나 업데이트 할 때 WP 관리자의 Google지도 지오 코딩에 전화

두 번째 옵션을 구현하는 방법은 질문과 엄격하게 관련이 없으며 답을 고려하지는 않지만이 Maps API 예제 를 참조하여 주소에서 좌표를 얼마나 간단하게 검색하는지 확인하십시오.

따라서이 답변에서 게시물에는 좌표가 쉼표로 구분 된 두 개의 문자열로 저장되는 사용자 정의 필드 'coords'가 있다고 가정 '38.897683,-77.03649'합니다.

또한 'page-google-map.php'파일에 페이지 템플릿이 저장되어 있다고 가정합니다.

다음 코드를 넣으십시오 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 );
}

보시다시피지도 페이지 템플릿에서

• 구글 맵 API 스크립트
• mygmap.js테마의 'js'하위 폴더에 있는 스크립트

또한 게시물을 반복하여 배열을 채우고이 배열을 $map_data사용 wp_localize_script하여 페이지의 js에 전달합니다.

이제 다음 mygmap.js이 포함됩니다.

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

자바 스크립트는 WP와 관련이 없으며 map_datavar 사용을 보여주기 위해 여기에만 두었습니다 . 나는 js 개발자가 아니며 코드는 거의 전부 여기 에서 가져옵니다 .

그게 다야. 페이지 템플릿을 만들고 ID가 'map'인 div를 삽입하십시오.

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

CSS의 사용에서 : 물론 사업부는 마커의 정보창도 스타일을 지정할 수있는 CSS로 스타일 및 참고 할 수 있습니다 h3.marker-title스타일 정보 창 제목과 div.marker-desc스타일에 내용을.

지도 중심은 자동으로 계산되며 기본 확대 / 축소를 변경하려면지도 페이지 템플릿에 할당 된 페이지에 사용자 정의 필드 'map_zoom'을 입력해야합니다.

도움이 되길 바랍니다.