创建交互式 InfoWindow Google Maps API

Question

I'm trying to essentially allow the user to click options in the Google Map infowindow which would alter the content of that infowindow, ie a page a,b,c inside the infowindow which when initially opened starts on a.

I've tried using jQuery at the top of the page (outside of the infowindow)

of the form

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

and giving them id="something" inside the contentvar but to no avail I've also tried having javascript of the form

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

inside the infowindow but I just get a whitescreen of death. Is there anyway you can put javascript within the html within the javascript? or anyway to allow the content of an infowindow to be changed from within the window once its already loaded.

Here is the code i'm looking at

its javascript/html nested inside some 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);
        
  });
   ";
}}}
?>

Answer 1

for those people trying to add tabs to your infowindow, try the infobubble library provided by Google

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

provides as good a working example as I myself would post.