物件一覧に地図をつける

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

グーグルマップに全物件のマーカーを表示し、クリック時にリンク付きでタイトルを表示する。
*座標の登録にはACFを使用

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<script type="text/javascript">
  function attachMessage(marker, msg) {
    google.maps.event.addListener(marker, 'click', function(event) {
      new google.maps.InfoWindow({
        content: msg
      }).open(marker.getMap(), marker);
    });
  }

  var data = new Array();
<?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(); ?>
<?php echo "data.push({position: new google.maps.LatLng("; ?><?php the_field('map'); ?><?php echo "), content: '"; ?><?php $link = get_permalink(); echo "<a href=$link>"; the_title(); echo "</a>"; ?><?php echo "'});"; ?> 
<?php endwhile; endif; wp_reset_query(); ?>

  var myMap = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,//地図縮尺
    center: new google.maps.LatLng(地図の中心座標),
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
 
  for (i = 0; i < data.length; i++) {
    var myMarker = new google.maps.Marker({
      position: data[i].position,
      map: myMap
    });
    attachMessage(myMarker, data[i].content);
  }
</script>