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 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
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.