谷歌地图信息窗口共享[关闭]

Question

我目前正在构建一个谷歌地图，该地图从 wordpress 中自定义帖子类型的 3 个不同类别中提取 lat/lng 坐标。我在学习的过程中正在构建它，但正在努力解决共享单个信息窗口的问题。

这里是代码。

(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);

}
}
})();

谁能指引我正确的方向？

Answer 1

在某处创建单个 infoWindow 实例：

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);