Anandapriyan / google-maps-utility-library-v3

Automatically exported from code.google.com/p/google-maps-utility-library-v3
Apache License 2.0
0 stars 0 forks source link

Twitter Bootstrap not working inside InfoBox #222

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
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">&lsaquo;</a>' +
            '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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

GoogleCodeExporter commented 8 years ago
I have the same problem.
No one has a solution?

Original comment by ing.clau...@gmail.com on 7 Oct 2013 at 1:48