谷歌地图信息框内的引导轮播

Question

我在我的网站中使用 Bootstrap，并使用 google maps api v3 (javascript) 创建了一个带有多个标记的地图。我想在每个标记的信息窗口中都有一个图像轮播。为了能够控制信息窗口样式，我使用Infobox addon。

问题是轮播在 Infobox 中不起作用。请查看此演示：

http://liveweave.com/MourQl

你能帮我解决这个问题吗？ JQuery 和 Infobox 之间是否存在某种不兼容？

这是创建地图的 js 代码：

<script type="text/javascript">
    function initialize() {

        var locations = [
          ['<h4>Bondi Beach</h4>', -33.890542, 151.274856],
          ['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
        ];

        var content = [
          ['<div id="carousel-example-1" class="carousel slide" data-ride="carousel" data-interval="false"><div class="carousel-inner"><div class="item active"><img src="http://i60.tinypic.com/25g70g9.jpg" alt=""></div><div class="item"><img src="http://i57.tinypic.com/ddgoia.jpg" alt="..."></div><div class="item"><img src="http://i58.tinypic.com/b3ws5c.jpg" alt="..."></div></div><a class="prev carousel-control" href="#carousel-example-1" role="button" data-slide="prev"></a><a class="next carousel-control" href="#carousel-example-1" role="button" data-slide="next"></a></div>'],
          ['<div id="carousel-example-2" class="carousel slide" data-ride="carousel" data-interval="false"><div class="carousel-inner"><div class="item active"><img src="http://i60.tinypic.com/25g70g9.jpg" alt=""></div><div class="item"><img src="http://i57.tinypic.com/ddgoia.jpg" alt="..."></div><div class="item"><img src="http://i58.tinypic.com/b3ws5c.jpg" alt="..."></div></div><a class="prev carousel-control" href="#carousel-example-2" role="button" data-slide="prev"></a><a class="next carousel-control" href="#carousel-example-2" role="button" data-slide="next"></a></div>']
        ];

        var map = new google.maps.Map(document.getElementById('map-container'), {
          zoom: 10,
          center: new google.maps.LatLng(-37.92, 151.25),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          streetViewControl: false,
          panControl: false,
          zoomControlOptions: {
             position: google.maps.ControlPosition.LEFT_BOTTOM
          }
        });

        var markers = new Array();

        //var iconCounter = 0;
        var markerImg = 'http://i58.tinypic.com/dr9o5j.png';
        var activeMarkerImg = 'http://i58.tinypic.com/w6ph7c.png';


        // Add the markers and infowindows to the map
        for (var i = 0; i < locations.length; i++) {  
         var marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i][1], locations[i][2]),
              map: map,
              icon: markerImg
          });

          markers.push(marker);

            var myOptions = {
             content: content[i][0]
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-125, -250)
            ,zIndex: null
            ,boxStyle: { 
              width: "250px"
             }
            ,closeBoxMargin: "0"
            ,closeBoxURL: ""
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
        };

        var ib = new InfoBox(myOptions);



        google.maps.event.addListener(marker, "click", function (e) {
          jQuery('.carousel').carousel();
          ib.open(map, this);
          jQuery('.carousel').carousel();
        });
        google.maps.event.addListener(ib, 'domready', function() {
            jQuery('.carousel').carousel();  

        });

        //ib.open(map, marker);


        }
        google.maps.event.addListener(map, 'click', function() {ib.close();});


        function AutoCenter() {
          //  Create a new viewpoint bound
          var bounds = new google.maps.LatLngBounds();
          //  Go through each...
          $.each(markers, function (index, marker) {
            bounds.extend(marker.position);
          });
          //  Fit these bounds to the map
          map.fitBounds(bounds);
        }
        AutoCenter();

    }
</script>



<script type="text/javascript">
jQuery(window).on('load', function () {
    //map initialize
    initialize();
});
</script>

Answer 1

我不确定您是否仍然遇到此问题，但对于其他遇到问题的人来说，信息框似乎禁用了子事件。加载信息框后，您需要单独添加事件。

infoWindow: function(content, map, marker) {
        google.maps.event.addListener(marker, 'click', function() {
            // If there is an open infobox on the screen, close it out
            if (ib) {
                ib.close();
            }

            ib.setContent($('.unitInfoBox').clone().html());
            ib.open(map, marker);

            // Once the infobox is fully loaded, add your events here
            ib.addListener('domready', function() {
                // Set up the carousel for images
                $('#unitImageContainer').carousel({
                    interval: false
                });

                // Specify what you want the carousel to do when the .carousel-indicator is clicked
                $('.carousel-indicators li').click(function() {
                    $('#unitImageContainer').carousel(parseInt($(this).attr('data-slide-to')));
                });
            });
        });
    }

我希望这会有所帮助。

Answer 2

只需稍作修改即可制作旋转木马箭头：

  infoWindow: function(content, map, marker) {
          google.maps.event.addListener(marker, 'click', function() {
              // If there is an open infobox on the screen, close it out
              if (ib) {
                  ib.close();
              }

              ib.setContent($('.unitInfoBox').clone().html());
              ib.open(map, marker);

              // Once the infobox is fully loaded, add your events here
              ib.addListener('domready', function() {
                  // Set up the carousel for images
                  $('#unitImageContainer').carousel({
                      interval: false
                  });

                  // Specify what you want the carousel to do when the .carousel-indicator is clicked
                  $('.carousel-indicators li').click(function() {
                      $('#unitImageContainer').carousel(parseInt($(this).attr('data-slide-to')));
                  });
                  // Arrows fix
                  $('.carousel-control').click(function() {
                    $('.map-thumbs').carousel($(this).attr('data-slide'));
                  });
              });
          });
      }