このエントリーをはてなブックマークに追加

物件一覧に地図をつける改、情報ウィンドウを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);
});

2015.12.01 投稿 2016.04.25 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles