情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・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);
});