Javascript 创建交互式信息窗口Google Maps API

我试图让用户在谷歌地图信息窗口中点击选项，这将改变该信息窗口的内容，即信息窗口中的a、b、c页，最初打开时从a开始

我尝试在页面顶部（信息窗口之外）使用jQuery

形式

$(document).ready(function(){
$("#other1").click(function(){
   
    
  $("#thingy").slideToggle("slow");
    $("#squirry").slideToggle("slow");
});
    
});

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

在contentvar中给他们id=“something”，但没有用 我也尝试过使用这种形式的javascript

$(document).ready(function(){
$("#other1").click(function(){
   
    
  $("#thingy").slideToggle("slow");
    $("#squirry").slideToggle("slow");
});
    
});

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

在信息窗口里，但我只看到了死亡的白屏。您是否可以将javascript放在javascript中的html中？或者，允许信息窗口的内容在加载后从窗口内更改

这是我正在查看的代码

它的javascript/html嵌套在一些php中

echo "

var myLatLng$i = {lat: $lat[$i], lng: $lng[$i]};     
      
      var image = 'nuticon.png';
        var address$i = new google.maps.Marker({
          position: myLatLng$i,
          icon: image,
          map: map});

      address$i.addListener('click', function() {
          document.getElementById('right-panel').innerHTML = '';

          var contentString$i = 
                    '<div id=\"content\">'+
                    '<div id=\"siteNotice\">'+
                    '</div>'+
                    '<h1 id=\"firstHeading\" align=\"center\" class=\"h3\">$titles[$i] </h1>'+
                    '<table border=\"1\" align=\"center\"><tr><p><td><b>Info</b></td><td> <b>Menu </b></td><td><b>Pictures</b></td></p></tr></table>'+
  '<div id=\"bodyContent\" align=\"center\">'+
  '<p></p>'+
 '<iframe id=\"iframe\" src=\"http://voting.first-jump.com/init.php?a=g&g=1000000000004$i&m=0&n=5&s=25&nosound=1&f=3.png&f_a=&f_b=&f_c=\" allowtransparency=\"true\" hspace=\"0\" vspace=\"0\" marginheight=\"0\" marginwidth=\"0\" frameborder=\"0\" height=\"38\" scrolling=\"no\" width=\"128\"></iframe>'+
 '</div>'+

  '<p align=\"center\" id=\"logo\" ><img src=\"$i.png\" width=\"120\" onclick=\"window()\"></p>'+
  '<p align=\"center\" id=\"weblink\">Website Link: <a href=\"$websites[$i]\">'+
  '$titles[$i]</a> '
  
  '</div>';
           var infoWindow$i = new google.maps.InfoWindow({ 
               
map: map,
content: contentString$i,
maxWidth: 200
      });
infoWindow$i.open(map, address$i);



var directionsService = new google.maps.DirectionsService;

    var directionsDisplay = new google.maps.DirectionsRenderer({
      draggable: false,
      map: map,
      panel: document.getElementById('right-panel')
    });
   directionsDisplay.setOptions( { suppressMarkers: true } );
    directionsDisplay.addListener('directions_changed', function() {
      computeTotalDistance(directionsDisplay.getDirections());
    });

    displayRoute(pos, '$lat[$i],$lng[$i]', directionsService,
        directionsDisplay);
        
  });
   ";
}}}
?>

echo”
var myLatLng$i={lat:$lat[$i]，lng:$lng[$i]}；
var image='nuticon.png'；
var address$i=new google.maps.Marker({
职位：myLatLng$i，
图标：图像，
map:map}）；
地址$i.addListener（'单击'，函数（））{
document.getElementById（'right-panel'）。innerHTML=''；
var contentString$i=
''+
''+
''+
“$titles[$i]”+
“信息菜单图片”+
''+
“
”+
''+
''+
“
”+
网站链接：'
'';
var infoWindow$i=新的google.maps.infoWindow（{
地图：地图，
内容：contentString$i，
最大宽度：200
});
信息窗口$i.open（地图、地址$i）；
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer({
可拖动：错误，
地图：地图，
面板：document.getElementById（'右面板'）
});
设置选项（{suppressMarkers:true}）；
directionsDisplay.addListener（'directions\u changed'，function（）{
ComputeTotalInstance（directionsDisplay.getDirections（））；
});
显示路线（位置“$lat[$i]”，$lng[$i]”，方向服务，
方向显示）；
});
";
}}}
?>

对于那些试图在您的信息窗口中添加选项卡的人，请尝试谷歌提供的infobubble库

提供了一个很好的工作示例，正如我自己将发布的一样。

请提供一个演示您的问题的示例。