WordpressのGmapに吹き出しを付けたい

質問

wordpressにACFを利用して埋め込んでいるGooglemapのピンにクリックで表示される吹き出しを付けたいのですが、うまくいきません。
しばらく前にwordpressのサポートでも質問したのですが回答を得られなかったのでかなり困っています。

状況としては、
「Advanced Custom Fieldsの全項目解説・公開側表示編集編」（http://blog.s-giken.net/253.html#googlemap）
を参考に下記のように書きました。
記述場所はphpファイル内です。

<?php
$name = get_field ( 'name' );
$map = get_field ( 'map' );

echo '<div id="map" style="width: 95%; height: 300px; margin:5px auto;"></div>';
echo '<span itemprop="hasMap"><script type="text/javascript">';
echo ' google.maps.event.addDomListener(window,"load",function(){';
echo ' var mapdiv=document.getElementById("map");';
echo ' var myOptions={zoom:15,center:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};';
echo ' var map=new google.maps.Map(mapdiv,myOptions);';
echo ' var marker=[];';
echo ' var infowindow=[];';
echo ' marker[0]=new google.maps.Marker({icon:"http://maps.google.com/mapfiles/kml/paddle/red-stars.png",position:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),map:map,title:"' . $name . '"});';
echo ' var markerCluster=new MarkerClusterer(map,marker);';
echo ' });';
echo '</script></span>';
?>

この状態でACF側で入力した住所をもとにマップ上に指定のマーカーを立てることはできているのですが、ここにクリックで表示される吹き出しを追加しようとしてもうまくいきません。

「マーカーがクリックされたら情報ウィンドウ（ふきだし）を表示する」（http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/marker/0004/）
や
「配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する」（https://ghweb.info/post-2709.html）
を参考にいろいろいじってみて、

google.maps.event.addListener(marker, "click", function() {
infowindow[0]=new google.maps.InfoWindow({
content: "このコンテンツを表示します"
});
infowindow.open(map, marker);
});

みたいな感じのをecho' 'で挟んで追記すれば動くかなと試したのですが、どうもうまくいきません。
解決方法をご教授いただければ幸いです。

回答No.2

やぎ じじい（@yagijijii） · ベストアンサー

あと以下が違っているようです。

marker[0]=new google.maps.Marker({icon:・・・と定義しているので、

infowindow[0].open(map, marker[0]);

としなければいけないと思います。

まずは、配列を用いず、１個だけで動作するように作成し、その後
複数データを扱うプログラムを作成することをお勧め致します。

お礼

google.maps.event.addListener(marker, "click", function() {
→google.maps.event.addListener(marker[0], "click", function() {

infowindow[0].open(map, marker);
→infowindow[0].open(map, marker[0]);

で動くようになりました！
ありがとうございます！！！

回答No.1

やぎ じじい（@yagijijii）

以下の通り、文法上のミスだと思います。

＞　infowindow=[];

＞　infowindow[0]=new google.maps.InfoWindow({

と前文で記述しているので、後文で

　　　infowindow[0].open(map, marker);

とすべきと思います。

補足

回答ありがとうございます！
下記のように記入してみましたが、表示側では何も変わりませんでした。

<?php
$name = get_field ( 'name' );
$map = get_field ( 'map' );

echo '<div id="map" style="width: 95%; height: 300px; margin:5px auto;"></div>';
echo '<span itemprop="hasMap"><script type="text/javascript">';
echo ' google.maps.event.addDomListener(window,"load",function(){';
echo ' var mapdiv=document.getElementById("map");';
echo ' var myOptions={zoom:15,center:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};';
echo ' var map=new google.maps.Map(mapdiv,myOptions);';
echo ' var marker=[];';
echo ' var infowindow=[];';
echo ' marker[0]=new google.maps.Marker({icon:"http://maps.google.com/mapfiles/kml/paddle/red-stars.png",position:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),map:map,title:"' . $name . '"});';

echo 'google.maps.event.addListener(marker, "click", function() {';
echo 'infowindow[0]=new google.maps.InfoWindow({';
echo 'content: "このコンテンツを表示します"';
echo '});';
echo 'infowindow[0].open(map, marker);';
echo '});';

echo ' var markerCluster=new MarkerClusterer(map,marker);';
echo ' });';
echo '</script></span>';
?>