CODEWITHSUNDEEP
jquerygoogle-maps
Adham
Adham

Reputation: 64844

How to use Jquery inside Google maps InfoWindow?

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

Upvotes: 5

Views: 7003

Answers (3)

Tekbreak
Tekbreak

Reputation: 686

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

Upvotes: 3

cederlof
cederlof

Reputation: 7383

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

Upvotes: 5

Maverick
Maverick

Reputation: 2016

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 :)

Upvotes: 5

Related Questions