情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。
物件一覧に地図をつける改、情報ウィンドウを1つしか開かない。
グーグルマップに全物件のマーカーを表示し、クリック時にリンク付きでタイトルを表示する。
*座標の登録にはACFを使用
*開いた情報ウィンドウは別のマーカーをクリックすると閉じる
<script type="text/javascript">
$(window).load(function(){
var map = null;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(地図の中心座標),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
var point;
<?php $args = array(
'post_type' => 'bukken',
'posts_per_page' => -1,
);
$the_query = new WP_Query( $args );
?>
<?php if ($the_query->have_posts()) : ?><?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
point = new google.maps.LatLng(<?php the_field('map'); ?>);
createMarker(point, '<?php $link = get_permalink(); echo "<a href=$link>"; the_title(); echo "</a>"; ?>');
<?php endwhile; endif; wp_reset_query(); ?>
}
function createMarker(latlng, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
initialize();
});
</script>
マーカーをクリックした時に地図の中央に移動させるには
google.maps.event.addListener(marker, ‘click’, function () {
map.setCenter(marker.getPosition());
infowindow.setContent(html);
infowindow.open(map, marker);
});