Có thể làm điều này mà không cần bất kỳ plugin nào, bạn chỉ cần API Google Maps .
Xin lưu ý rằng nếu bạn dự định có 20 điểm đánh dấu trở lên trên một trang, bạn phải định vị địa lý các bài đăng bằng tọa độ chứ không phải địa chỉ.
Để lưu tọa độ từ một địa chỉ, bạn có thể:
- sử dụng thủ công một dịch vụ (đại loại như thế này )
- gọi mã hóa bản đồ Google từ quản trị viên WP khi bạn tạo hoặc cập nhật bài đăng
Cách triển khai tùy chọn thứ hai không liên quan chặt chẽ đến câu hỏi và tôi sẽ không tính đến câu trả lời của mình, nhưng hãy xem ví dụ API Maps này để xem cách lấy tọa độ đơn giản từ một địa chỉ.
Vì vậy, tôi sẽ giả sử trong câu trả lời này rằng các bài đăng có trường tùy chỉnh 'coords' trong đó tọa độ được lưu trữ dưới dạng một chuỗi gồm hai giá trị được phân tách bằng dấu phẩy, đôi khi như : '38.897683,-77.03649'.
Tôi cũng giả sử rằng có một mẫu trang được lưu trong tệp 'page-google-map.php'.
Đặt mã sau vào 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 );
}
Như bạn có thể thấy, trong mẫu trang bản đồ, tôi liệt kê
- kịch bản api google map
- một tập lệnh được gọi
mygmap.jsnằm trong thư mục con của 'js' của chủ đề
Ngoài ra, lặp lại các bài đăng, tôi điền vào một mảng $map_datavà sử dụng wp_localize_scripttôi chuyển mảng này cho js trong trang.
Bây giờ, mygmap.jssẽ chứa:
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 );
Các javascript không liên quan đến WP và tôi chỉ đặt ở đây để hiển thị việc sử dụng map_datavar. Tôi không phải là nhà phát triển js và mã ít nhiều được lấy hoàn toàn từ đây
Đó là tất cả. Chỉ cần tạo mẫu trang và chèn div với id 'map', đại loại như:
<div id="map" style="width:100%; height:100%"></div>
Tất nhiên, div có thể được tạo kiểu bằng css và cũng lưu ý rằng các cửa sổ thông tin của các điểm đánh dấu cũng có thể được tạo kiểu: trong css sử dụng h3.marker-titleđể tạo kiểu cho tiêu đề cửa sổ thông tin và div.marker-descđể tạo kiểu cho nội dung.
Lưu ý rằng trung tâm bản đồ được tự động tính toán và nếu bạn muốn thay đổi mức thu phóng mặc định, bạn phải đặt trường tùy chỉnh 'map_zoom' trong trang được gán cho mẫu trang bản đồ.
Hy vọng nó giúp.