创建交互式 InfoWindow Google Maps API答案

【问题标题】：Creating an interactive InfoWindow Google Maps API创建交互式 InfoWindow Google Maps API
【发布时间】：2016-07-12 09:50:48
【问题描述】：

我试图从本质上允许用户单击 Google 地图信息窗口中的选项，这将改变该信息窗口的内容，即最初打开时从 a 开始的信息窗口内的页面 a、b、c。

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

形式

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

并在 contentvar 中给他们 id="something" 但无济于事我也尝试过使用 javascript 的形式

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);
        
  });
   ";
}}}
?>

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明您的问题。

标签： javascript php jquery html google-maps

【解决方案1】：

对于那些试图将标签添加到您的信息窗口的人，请尝试使用 Google 提供的 infobubble 库

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

提供了一个与我本人一样好的工作示例。

【讨论】：