可以做到这一点without 任何插件，您只需要Google Maps API.
请注意，如果你计划在一个页面上有20个或更多标记，你必须使用坐标而不是地址来定位帖子。
要从地址保存坐标，您可以：
手动使用服务（类似this)
当您创建或更新帖子时，请致电WP admin的Google maps geocoding，如何实现第二个选项与这个问题没有严格的关系，我不会在回答时考虑它，但请参见此Maps API example 查看从地址检索坐标有多简单。因此，在这个答案中，我将假设帖子有一个自定义字段“coords”，其中坐标存储为两个逗号分隔的值的字符串，类似于：\'38.897683,-77.03649\'.
我还假设在“谷歌地图页面”文件中保存了一个页面模板。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 );
}
如您所见，在地图页面模板中，我排队google map 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 );
javascript与WP无关，我放在这里只是为了说明map_data var.我不是js开发人员，代码或多或少完全取自here仅此而已。只需创建页面模板并插入id为“map”的div，类似于：
<div id="map" style="width:100%; height:100%"></div>
当然，div可以用css设置样式，并且注意标记的信息窗口也可以设置样式：在css使用中h3.marker-title 设置信息窗口标题样式的步骤div.marker-desc 设置内容样式。请注意，地图中心是自动计算的，如果要更改默认缩放比例，必须在指定给地图页面模板的页面中放置一个自定义字段“map\\u zoom”。
希望有帮助。
