How to use Jquery inside Google maps InfoWindow?

Question

I want to show jQuery effects (show and hide divs) inside the Google maps InfoWindow, how can I do this?

Answer 1

Even though I have personalty not yet tried it, this -> http://code.google.com/p/jquery-ui-map/ plugin should provide the functionality you are searching for.

Hope it helps! Have fun :)

Answer 2

The InfoWindow can take a DOM-object as content. So create one, and then get the jQuery-reference to it, like this:

var layer = document.createElement("div");
layer.innerText="Click to hide!";
$(layer).click(function(){ $(layer).hide('slow'); } );

infoWindow.setContent(layer); //something like this

Answer 3

I use this:

var marker = new google.maps.Marker({...})

//Create infowindow
var infowindow = new google.maps.InfoWindow({
    content: "Some content"
});

//Link infowindow to marker in map
infowindow.open(map,marker);

//Add a listener
google.maps.event.addListener(infowindow, 'domready', function() {
    $( '.gira' ).change(function(){alert('a')})
})

From API Ref: This event is fired when the containing the InfoWindow's content is attached to the DOM