谷歌地圖Infowindow分享

Question

我目前正在建立一個谷歌地圖，它從wordpress中的3個不同類別的自定義帖子類型中提取緯度/經度座標。我在學習的過程中建立了這一點，但努力想通過一個共享單個infowindow的問題。

這是代碼。

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