Google Maps APIのinfoWindowがopenしない

Question

WordPressでGoogle Maps APIを利用したサイトを趣味で制作しております。
諸々初心者です。
マーカーをクリックするとinfoWindowがopenするようにしたく、試しに以下のように記述してみたのですが、クリックしても何も起きません。
アドバイスを頂けますと大変助かります。

$term_id = get_queried_object_id();
$args = array(
	'post_type' => 'hoge',
	'posts_per_page' => -1,
	'tax_query' => array(
		array(
			'taxonomy' => $taxonomy_name,
			'terms'    => $term_id,
		),
	),
);
$custom_query = new WP_Query( $args );//echo'<pre>';var_dump($custom_query);echo'</pre>';
if ( $custom_query->have_posts() ) :
	echo '<script>';
	echo 'var data = new Array();';
while ( $custom_query->have_posts() ) : $custom_query->the_post();
	$location = get_post_meta(get_the_ID(), 'location');
	$title=get_the_title();
	if($location[0]['lat'] && $location[0]['lng']) {
		echo 'data.push({';
		echo 'lat: "'.$location[0]['lat'].'",';
		echo 'lng: "'.$location[0]['lng'].'",';
		echo 'title: "'.$title.'",';
		echo 'url: "'.get_permalink(get_the_ID()).'"';
		echo '});';
	}
endwhile;
	echo '</script>';
wp_reset_postdata();
endif;

<div id="gmaps" style="width: 100%; height: 100%;"></div>
<script type="text/javascript" src="//maps.google.com/maps/api/js?key=hogehoge"></script>
<script type="text/javascript">
<!--
var lat,lng;
var map = new google.maps.Map(
document.getElementById("gmaps"),{
zoom : 10,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
// マーカーを生成
var marker = new Array();
for(var i=0; i<data.length; i++){
	var lat = data[i].lat;
	var lng = data[i].lng;
var name = data[i].title;
	var url = data[i].url;
	marker[i] = new google.maps.Marker({
		position: new google.maps.LatLng(lat, lng),
		map: map
	});
var latlng = new google.maps.LatLng(lat,lng);
var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker[i], "click", function() {
infoWindow.setContent(name);
infoWindow.open(map,marker[i]);
});
}
// 範囲内に収める
var minX = marker[0].getPosition().lng();
var minY = marker[0].getPosition().lat();
var maxX = marker[0].getPosition().lng();;
var maxY = marker[0].getPosition().lat();;
for(var i=0; i<data.length; i++){
	var lt = marker[i].getPosition().lat();
	var lg = marker[i].getPosition().lng();
	if (lg <= minX){ minX = lg; } if (lg > maxX){ maxX = lg; }
	if (lt <= minY){ minY = lt; } if (lt > maxY){ maxY = lt; }
}
var sw = new google.maps.LatLng(maxY, minX);
var ne = new google.maps.LatLng(minY, maxX);
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds);
//-->
</script>

以上、何卒よろしくお願いいたしますm(_ _)m

Answer 1

var i -> let i

Comments

[michir]

ありがとうございます！お陰様でinfoWindowがopenしました！
ただ、infoWindowに表示される内容が、配列dataの最後の値のtitleになってしまいます。
infoWindow.setContent(name) を、別の場所に記述することで解決できるのかなと考えておりますが、どこに記述すればよいか分かりません。
重ね重ね大変恐縮ですが、アドバイスいただけますと大変助かりますm(_ _)m

[kei344]

$title=get_the_title(get_the_ID());

[michir]

ご返信誠にありがとうございます！
$title=get_the_title();
を
$title=get_the_title(get_the_ID());
に変更してみましたが、$titleの中身に変化はありませんでした。

ご回答内容の趣旨を取り違えていたら恐縮なのですが、改めてご確認いただくことは可能でしょうか？m(_ _)m

[michir]

追伸です。
私なりに考えて、以下のように変更してみましたが、うまくいきませんでした。
（name[i]が未定義となってしまいました）

// マーカーを生成
var marker = new Array();
var name = new Array();
for(let i=0; i<data.length; i++){
var lat = data[i].lat;
var lng = data[i].lng;
name[i] = data[i].title;
var url = data[i].url;
marker[i] = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
var latlng = new google.maps.LatLng(lat,lng);
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker[i], "click", function() {
infoWindow.setContent(name[i]);
infoWindow.open(map,marker[i]);
});
}

[kei344]

「name[i] = data[i].title;」って何。
infoWindow.setContent(data[i].title);
でいいのでは。