Slick.js Does Not Work with infoBox.js in the Google Maps API

Question

I'm trying to implement a carousel inside infoBox.js (or default infoWindow) in the Google Maps API. The carousel is being powered by the slick.js plugin.

As far as I can tell, my code seems fine because there are no errors in the console. I'm having a hard time tracking down the problem.

Can anyone suggest a solution? Thank you. My full code snippet is below, but this is how I have ordered the code for the main components (infoBox, slick.js, jQuery UI).

// Set infoBox Content
var boxText = document.createElement("div");
boxText.innerHTML =
    '<div class="stack">' +
    '<div class="boxes">' +
    '<h1>1</h1>' +
    '<div class="slider"></div>' +
    '</div>' +
    '<div class="boxes">' +
    '<h1>2</h1>' +
    '</div>' +
    '<div class="boxes">' +
    '<h1>3</h1>' +
    '</div>' +
    '</div>' +
    '</div>';

// Initialize slick.js plugin
$('.stack').slick({
    centerMode: true,
    centerPadding: '80px',
    arrows: false,
    variableWidth: true,
    dots: true,
    swipeToSlide: true,
    focusOnSelect: true
});

// Intialize jQuery UI Slider
$('.slider').slider({
    max: 100,
    min: 0,
    value: 95
});

// Open infoBox when marker is clicked
google.maps.event.addListener(marker, 'click', function () {
    infoBubble.open(map, marker);
});

var boxText = document.createElement("div");
boxText.innerHTML =
    '<div class="stack">' +
    '<div class="boxes">' +
    '<h1>1</h1>' +
    '<div class="slider"></div>' +
    '</div>' +
    '<div class="boxes">' +
    '<h1>2</h1>' +
    '</div>' +
    '<div class="boxes">' +
    '<h1>3</h1>' +
    '</div>' +
    '</div>' +
    '</div>';

$('.stack').slick({
    centerMode: true,
    centerPadding: '80px',
    arrows: false,
    variableWidth: true,
    dots: true,
    swipeToSlide: true,
    focusOnSelect: true
});

$('.slider').slider({
    max: 100,
    min: 0,
    value: 95
});

var myOptions = {
    content: boxText,
    disableAutoPan: false,
    alignBottom: true,
    pixelOffset: new google.maps.Size(-126, -48),
    zIndex: null,
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
};
infoBubble = new InfoBox(myOptions);

function initialize() {
    var mapOptions = {
        zoom: 11,
        minZoom: 11,
        maxZoom: 15,
        disableDefaultUI: true,
        center: new google.maps.LatLng(51.0333246, -114.0581015)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: new google.maps.LatLng(51.0333246, -114.0581015),
        visible: true
    });
    google.maps.event.addListener(marker, 'click', function () {
        infoBubble.open(map, marker);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
    height: 100%;
    padding: 0;
    margin: 0;
}
.infoBox {
    height: 200px;
    width: 200px;
    background: #fff;
    padding: 1em;
}
.boxes {
    height: 250px;
    width: 175px;
    display: inline;
    margin: 1em;
    background: #ccc;
    text-align: center;
    font-weight: bold;
    display: table;
    border: 2px solid transparent;
    border-radius: 4px;
}
.slick-slide {
    text-align: center;
    cursor: pointer;
    transform: scale(0.9);
}
.slick-center {
    background: #fff;
    border: 2px solid #ccc;
    transition: all 0.5s;
    transform: scale(1);
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 190px;
    padding: 0 78px;
    margin: 0 auto;
}
.slider {
    width: 120px;
    margin: 0 auto;
}
h2 {
    font-size: 0.850em;
    text-transform: uppercase;
}
a:link {
    color: #0266C8;
    text-decoration: none;
}

<link href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<div id="map-canvas"></div>

I suspect you need to wait for the domready event to fire when you open the infobox before running any javascript that depends on elements in the infobox. Just doing that didn't seem to solve your problem (unless you have changed things since the last time you asked this question). Does the code work on a normal web page (not in an InfoBox)? — geocodezip, Mar 06 '15 at 00:04
@geocodezip — Yes the code that is inside `boxText.innerHTML` works on the normal web page: http://jsfiddle.net/nm5s42k1/1/ How do I make the domready event fire when opening the infoBox? — kaoscify, Mar 06 '15 at 15:48
The 'domready' event fires when the dom in the infoBox has been attacked to the DOM [from the documentation: This event is fired when the DIV containing the InfoBox's content is attached to the DOM.](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html) — geocodezip, Mar 06 '15 at 16:14
@geocodezip — I also tried using the default Google Maps infoWindow and it has the same problem. — kaoscify, Mar 06 '15 at 16:39
@geocodezip I solved it by adding `addListenerOnce` for `domready` when the marker is clicked. http://jsfiddle.net/nm5s42k1/2/ — kaoscify, Mar 06 '15 at 20:16

score 1 · Accepted Answer · answered Mar 09 '15 at 14:46

I added an addListenerOnce for domready event to load the slick.js plugin in the infoWindow:

google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
    $('.stack').slick({
        centerMode: true,
        centerPadding: '80px',
        arrows: false,
        variableWidth: true,
        dots: false,
        swipeToSlide: true,
        focusOnSelect: true
    });
});

Slick.js Does Not Work with infoBox.js in the Google Maps API

1 Answers1