Menu
Problem: I'm trying to integrate a slider (carousel) inside an info window of google map.
1. JQuery code for the slider:
<head>
...
<script src="js/jquery.anythingslider.js"></script>
<script>
// Set up Sliders
// **************
$(function(){
$('#mySlider').anythingSlider({
mode : 'f', // fade mode - new in v1.8!
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
expand : true,
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
onSlideBegin: function(e,slider) {
// keep the current navigation tab in view
slider.navWindow( slider.targetPage );
}
});
});
</script>
...
</head>
2. Html code. This is how would the slider work inside a regular html page:
<div style="width:450px;height:150px;">
<ul id="mySlider"> <!-- id corresponds to id used in Jquery code -->
<li>
Content of Slide 1
</li>
<li>
Content of Slide 2
</li>
<li>
Content of slide 3
</li>
</ul>
</div>
Now, I don't have much experience with JavaScript so how do I make the jquery code accessible inside an info window. In other words where should I put he slider code?
EDIT: This is what I tried so far but no luck
(function() {
// Defining variables that need to be available to some functions
var map, infoWindow;
window.onload = function() {
// Creating a map
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.756054, -73.986951),
map: map,
title: 'Click me'
});
google.maps.event.addListener(marker, 'click', function() {
// add some content to userLi1
var userLi1 = '<li>Some awesome content for the 1st list item</li>';
// add some content userLi2
var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
// Check to see if an InfoWindow already exists
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow to the detail map
//infoWindow.setContent(detailDiv);
infoWindow.setContent('<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>');
// Opening the InfoWindow
infoWindow.open(map, marker);
});
// initiate slider here
$('#mySlider').anythingSlider({
mode : 'f', // fade mode - new in v1.8!
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
expand : true,
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
onSlideBegin: function(e,slider) {
// keep the current navigation tab in view
slider.navWindow( slider.targetPage );
}
});
};
})();
When I run the code, the Jquery doesn't get triggered at all.
EDIT 2: SOLUTION I solved the problem by using McMaster code and wrapping the relevant jquery code with
google.maps.event.addListener(infowindow, 'domready', function(){
});
So this is the entire code:
$(document).ready(function() { // runs jquery when document is ready
function initialize() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
// looks for map, when tiles are loaded, fire function addmarkers
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
var lat =37.09;
var lng = -95-71;
var latLng = new google.maps.LatLng(
lat,
lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
// add some content to userLi1
var userLi1 = '<li>Some awesome content for the 1st list item</li>';
// add some content userLi2
var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
// set marker content
marker.html = '<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>';
// add listener
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker.html);
infowindow.open(map, marker);
});
}
initialize();
google.maps.event.addListener(infowindow, 'domready', function(){
// initiate slider here
$('#mySlider').anythingSlider({
mode : 'f', // fade mode - new in v1.8!
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
expand : true,
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
onSlideBegin: function(e,slider) {
// keep the current navigation tab in view
slider.navWindow( slider.targetPage );
}
});
});
});
992
Call setPosition() on the info window, or. Attach the info window to a new marker using the InfoWindow. open() method. Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
You are actually making a DOM element directly on the document
you would need to use something like this:
infoWindow.setContent('<div id="mySlider"><ul><li>' + userLi1 + '</li><li>' + userLi2 + '</li></ul></div>');
EDIT:
This is fully working script modified from one of my projects to fit your needs:
$(document).ready(function() { // runs jquery when document is ready
function initialize() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
// looks for map, when tiles are loaded, fire function addmarkers
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
var lat =37.09;
var lng = -95-71;
var latLng = new google.maps.LatLng(
lat,
lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
// add some content to userLi1
var userLi1 = '<li>Some awesome content for the 1st list item</li>';
// add some content userLi2
var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
// set marker content
marker.html = '<div style = "width:450px;height:150px;"><ul id="slider2">' + userLi1 + userLi2 + '</ul></div>';
// add listener
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker.html);
infowindow.open(map, marker);
});
}
initialize();
// initiate slider here
$('#mySlider').anythingSlider({
mode : 'f', // fade mode - new in v1.8!
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
expand : true,
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
onSlideBegin: function(e,slider) {
// keep the current navigation tab in view
slider.navWindow( slider.targetPage );
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
