javascriptjquerygoogle-mapsanythingslider

Run a slider of images in google map info window


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();

    });

enter image description here


Solution

  • 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();
     });