I am trying to show a slider of images in Google Map info windows. but no error coming but slider is not working.
I want to do same as in picture.
$(document).ready(function() { // runs jquery when document is ready
function initialize() {
var uluru = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '<div id="content"><ul id="slider"><li><img src="demos/images/slide-civil-1.jpg" alt=""></li><li><img src="demos/images/slide-env-1.jpg" alt=""></li><li><img src="demos/images/slide-civil-2.jpg" alt=""></li><li><img src="demos/images/slide-env-2.jpg" alt=""></li></ul></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(infowindow, function() {
$('#slider').anythingSlider();
});
}
initialize();
});
you need to run $('#slider').anythingSlider();
on the domready
event of the infowindow (you are missing the event name in your event listener)
google.maps.event.addListener(infowindow, "domready", function() {
$('#slider').anythingSlider();
});