回答:
プラグインなしでこれを行うことができ、必要なのはGoogle Maps APIだけです。
1つのページに20以上のマーカーを配置する場合は、住所ではなく座標を使用して投稿を地理的に配置する必要があることに注意してください。
住所から座標を保存するには、次の方法があります。
2番目のオプションを実装する方法は質問に厳密に関連しているわけではないので、私の回答では考慮しませんが、このMaps APIの例を参照して、住所から座標を取得する方法を簡単に確認してください。
したがって、この回答では、投稿にカスタムフィールド「coords」があり、座標が2つのコンマ区切り値の文字列として格納されていると想定します'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 );
}
ご覧のとおり、マップページテンプレートで、エンキューします
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
変数の使用法を示すためにのみ示しています。私はjs開発者ではなく、コードはほぼ完全にここから取得されます
それで全部です。ページテンプレートを作成し、IDが「map」のdivを挿入するだけです。
<div id="map" style="width:100%; height:100%"></div>
もちろん、divはcssでスタイルを設定できます。マーカーの情報ウィンドウもスタイルを設定できることに注意してください。cssではh3.marker-title
、情報ウィンドウのタイトルとdiv.marker-desc
コンテンツのスタイルを設定するために使用します。
マップの中心は自動的に計算され、デフォルトのズームを変更する場合は、マップページテンプレートに割り当てられたページにカスタムフィールド「map_zoom」を配置する必要があることに注意してください。
それが役に立てば幸い。
(37.983917, 23.729359899999963)
コードをどこで編集すれば、コードを編集して、周りのブレイケットとコードを使用できるようになります。私の試みは失敗しました。素晴らしいけれどもこの回答をありがとう!
$meta_coords = get_post_meta( get_the_ID(), 'coords', true );
に$meta_coords = trim(get_post_meta( get_the_ID(), 'coords', true ), '()');
、そしてもちろん置き換えるcoords
ストア座標に実際の現場にプラグインが使用します。