在谷歌地图信息窗口中运行图像滑块

时间:2017-07-01 12:26:22

标签: javascript jquery google-maps anythingslider

我正在尝试在Google地图信息窗口中显示图片滑块。但没有错误,但滑块不起作用。

我想和照片一样做。

 $(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

1 个答案:

答案 0 :(得分:1)

您需要在infowindow的$('#slider').anythingSlider();事件上运行domready(您在事件监听器中缺少事件名称)

google.maps.event.addListener(infowindow, "domready", function() {
      $('#slider').anythingSlider();
 });