Hi,
I'm trying to add a Bootstrap (possibly a Angular-UI) carousel and a link to
activate a modal inside a InfoBox. I'm added on to the example from the site
but had no luck. The carousel with pictures gets added but then it doesn't do
anything. Clicking on any added <a href="detailsModal">Open Modal</a> or even
the carousel itself doesn't do anything.
Maybe I'm setting the content wrong. Appreciate any help that I could get.
Been at this for days. Thanks for your time.
Here's the code:
$scope.boxText = document.createElement("div");
$scope.boxText.style.cssText = "border: 1px solid gray; height: 200px;
max-height: 200px; background: white; margin-top: 8px; padding: 5px;";
$scope.boxText.innerHTML = '<div id="myCarousel" class="carousel slide">' +
'<div class="carousel-inner">'
'<div class="active item thumb">' +
'<img ng-src="http://placekitten.com/325/200"/>' +
'</div>' +
'<div class="item thumb">' +
'<img ng-src="http://placekitten.com/325/200"/>' +
'</div>' +
'</div>' +
'<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>' +
'<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>' +
'</div>';
$scope.myOptions = {
content : $scope.boxText,
disableAutoPan : false,
maxWidth : 0,
pixelOffset : new google.maps.Size(-200, -250),
zIndex : null,
boxStyle : {
width : "400px"
},
closeBoxMargin : "200px 175px 2px 2px",
closeBoxURL : "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance : new google.maps.Size(1, 1),
isHidden : false,
pane : "floatPane",
enableEventPropagation : false
};
$scope.ib = new InfoBox($scope.myOptions);
$scope.ib.open($scope.myMap, marker);
Expected result:
Clicking on the carousel controls (left or right arrows) will change the
picture inside the info box.
Actual result:
Clicking on the carousel controls (left or right arrows) does nothing.
Original issue reported on code.google.com by sujing...@gmail.com on 18 Jan 2013 at 7:42
Original issue reported on code.google.com by
sujing...@gmail.com
on 18 Jan 2013 at 7:42