0

現在、ワードプレスのカスタム投稿タイプの 3 つの異なるカテゴリから緯度/経度座標を取得する Google マップを作成しています。学習しながらこれを構築していますが、単一の情報ウィンドウを共有するという問題を乗り越えるのに苦労しています。

これがコードです。

(function() {
window.onload = function() {

// Creating an object literal containing the properties // we want to pass to the map
var options = {
zoom: 8,
center: new google.maps.LatLng(53.789397,-2.255003), mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Creating the map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);

var commercialplaces = [];
var commercialmyTitle = [];
var commercialmyContent = [];

var housingplaces = [];
var housingmyTitle = [];
var housingmyContent = [];

var riversideplaces = [];
var riversidemyTitle = [];
var riversidemyContent = [];

// Adding a marker to the map
<?php 
          query_posts( array( 
            'post_type' => 'livesites',
            'livesites-cat'=> 'commercial',
            'showposts' => 1000,
            'order' => ASC,
            'orderby' => title,
            ));

          if ( have_posts() ) : while ( have_posts() ) : the_post();        
?> 

commercialmyTitle.push('<?php the_title(); ?>');
commercialmyContent.push('<?php the_field('address'); ?>');
commercialplaces.push(new google.maps.LatLng(<?php the_field('location_for_map'); ?>));

<?php  endwhile; endif; wp_reset_query(); ?> 

// Looping through the commercialplaces array
for (var i = 0; i < commercialplaces.length; i++) {

// Adding the marker as usual
var marker = new google.maps.Marker({
position: commercialplaces[i],
map: map,
title: commercialmyTitle[i],
icon: 'http://icansee.co.uk/commerciallivesite.png',
});


// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: commercialmyContent[i],
});
infowindow.open(map, marker);
});
})(i, marker);

}

// Adding a marker to the map
<?php 
          query_posts( array( 
            'post_type' => 'livesites',
            'livesites-cat'=> 'housing',
            'showposts' => 1000,
            'order' => ASC,
            'orderby' => title,
            ));

          if ( have_posts() ) : while ( have_posts() ) : the_post();        
?> 

housingmyTitle.push('<?php the_title(); ?>');
housingmyContent.push('<?php the_field('address'); ?>');
housingplaces.push(new google.maps.LatLng(<?php the_field('location_for_map'); ?>));

<?php  endwhile; endif; wp_reset_query(); ?> 

// Looping through the commercialplaces array
for (var i = 0; i < housingplaces.length; i++) {

// Adding the marker as usual
var marker = new google.maps.Marker({
position: housingplaces[i],
map: map,
title: housingmyTitle[i],
icon: 'http://icansee.co.uk/housinglivesite.png',
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: housingmyContent[i],
});
infowindow.open(map, marker);
});
})(i, marker);

}

// Adding a marker to the map
<?php 
          query_posts( array( 
            'post_type' => 'livesites',
            'livesites-cat'=> 'riverside-interiors',
            'showposts' => 1000,
            'order' => ASC,
            'orderby' => title,
            ));

          if ( have_posts() ) : while ( have_posts() ) : the_post();        
?> 

riversidemyTitle.push('<?php the_title(); ?>');
riversidemyContent.push('<?php the_field('address'); ?>');
riversideplaces.push(new google.maps.LatLng(<?php the_field('location_for_map'); ?>));

<?php  endwhile; endif; wp_reset_query(); ?> 

// Looping through the commercialplaces array
for (var i = 0; i < riversideplaces.length; i++) {

// Adding the marker as usual
var marker = new google.maps.Marker({
position: riversideplaces[i],
map: map,
title: riversidemyTitle[i],
icon: 'http://icansee.co.uk/interiorlivesite.png',
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: riversidemyContent[i],
});
infowindow.open(map, marker);
});
})(i, marker);

}
}
})();

誰かが私を正しい方向に導くことができますか?

4

1 に答える 1

0

単一のinfoWindow-instanceをどこかに作成します。

infowindow = new google.maps.InfoWindow();

マーカーのクリックハンドラー内で、この情報ウィンドウのコンテンツのみを設定して開きます。

(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(riversidemyContent[i]);
infowindow.open(map, marker);
});
})(i, marker);
于 2013-03-07T00:52:49.210 に答える