snazzy-info-window
snazzy-info-window copied to clipboard
Published
20 hours ago •
atmist
atmist
Cant handle complex style with multiple markers
I created a map with 5 markers, which i want them to open different complex styles nazzy windows. The problem is that the only window that open/closes correctly is always the last one, i guess its because its the one referred last. Any suggestions on how to implement it? This is the code from "scripts.js"
// Create the map
var map = new google.maps.Map($('.map-canvas')[0], {
zoom: 14,
styles: mapStyle,
scrollwheel: false,
center: new google.maps.LatLng(-33.88322, 151.22009),
//{'featureType': 'poi','elementType': 'all', 'stylers': [{'visibility': 'off'}]},//mapStyle,
});
// Add a custom marker
var markerIcon = {
path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
fillColor: '#6FC',
fillOpacity: 0.95,
scale: 3,
strokeColor: '#fff',
strokeWeight: 2,
anchor: new google.maps.Point(12, 24)
};
/*var marker = new google.maps.Marker({
map: map,
icon: 'logo_sbc_CUBSM.fw.png',
position: new google.maps.LatLng(-33.87073, 151.2104)
});*/
var marker_a = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.87355, 151.20697)
});
var marker_b = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.86578, 151.20616)
});
var marker1 = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.88706, 151.17122)
});
var marker2 = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.90433, 151.19577)
});
var concrete_cafe = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.88547, 151.20172)
});
var preach_cafe = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.89129, 151.27348)
});
var baby_coffee = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.9005, 151.20633)
});
// Set up handle bars
var template = Handlebars.compile($('#marker-content-template').html());
// Set up a close delay for CSS animations
var info = null;
var closeDelayed = false;
var closeDelayHandler = function() {
$(info.getWrapper()).removeClass('active');
setTimeout(function() {
closeDelayed = true;
info.close();
}, 300);
};
//Info Window to the marker
info = new SnazzyInfoWindow({
//if(marker==marker2)
marker: marker2,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Nelson Nest',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'nelsonnest.png',
body: '<p><i>The secret ingredient is always love and you will be sure to find it</p></i> '+
'echo $(this.getWrapper())'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
info = new SnazzyInfoWindow({
marker: cafe_06,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: '0.6 CAFE',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'cafe06.png',
body: '<p><i>Rolling into the weekend with a magic matcha brunch</p></i> '+
'<p>Alexandria best coffee and brunch</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>7am - 4pm Weekdays</p>'+
'<p>9am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
//------------------------------
info = new SnazzyInfoWindow({
marker: concrete_cafe,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Concrete Jungle Cafe',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'concrete.png',
body: '<p><i>A serene oasis from the hustle of Sydney busy streets</p></i> '+
'<p>Refuel your energy at Concrete Jungle</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
info = new SnazzyInfoWindow({
marker: preach_cafe,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Preach Cafe',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'preach.png',
body: '<p><i>A great place for brunch in Bondi beach</p></i> '+
'<p>Enjoy your bowls by the sea</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
info = new SnazzyInfoWindow({
marker: baby_coffee,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Baby Coffee CO',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'baby.png',
body: '<p><i>Pink Panther @babycoffeeco, Let me paint your world .</p></i>'+
'<p>Enjoy your bowls by the sea</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
// Open Info Window
//info.close();
});`
Every time you are creating a snazzy you are using info=... try info1 = , info2 =, etc. every instance you are redefining info so by the end only the last "info" exists.
Hello all, sorry but i've got the same problem… i scratch my head but i don't see what's happens: i'm sure it's easy, but i tried several things with no results. Could you help me? ;) Thank you! Best regards, Jerome
$(function() {
// Snazzy Map Style - https://snazzymaps.com/style/8097/wy
var mapStyle = [{'featureType': 'all', 'elementType': 'geometry.fill', 'stylers': [{'weight': '2.00'}]}, {'featureType': 'all', 'elementType': 'geometry.stroke', 'stylers': [{'color': '#9c9c9c'}]}, {'featureType': 'all', 'elementType': 'labels.text', 'stylers': [{'visibility': 'on'}]}, {'featureType': 'landscape', 'elementType': 'all', 'stylers': [{'color': '#f2f2f2'}]}, {'featureType': 'landscape', 'elementType': 'geometry.fill', 'stylers': [{'color': '#ffffff'}]}, {'featureType': 'landscape.man_made', 'elementType': 'geometry.fill', 'stylers': [{'color': '#ffffff'}]}, {'featureType': 'poi', 'elementType': 'all', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'road', 'elementType': 'all', 'stylers': [{'saturation': -100}, {'lightness': 45}]}, {'featureType': 'road', 'elementType': 'geometry.fill', 'stylers': [{'color': '#eeeeee'}]}, {'featureType': 'road', 'elementType': 'labels.text.fill', 'stylers': [{'color': '#7b7b7b'}]}, {'featureType': 'road', 'elementType': 'labels.text.stroke', 'stylers': [{'color': '#ffffff'}]}, {'featureType': 'road.highway', 'elementType': 'all', 'stylers': [{'visibility': 'simplified'}]}, {'featureType': 'road.arterial', 'elementType': 'labels.icon', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'transit', 'elementType': 'all', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'water', 'elementType': 'all', 'stylers': [{'color': '#46bcec'}, {'visibility': 'on'}]}, {'featureType': 'water', 'elementType': 'geometry.fill', 'stylers': [{'color': '#c8d7d4'}]}, {'featureType': 'water', 'elementType': 'labels.text.fill', 'stylers': [{'color': '#070707'}]}, {'featureType': 'water', 'elementType': 'labels.text.stroke', 'stylers': [{'color': '#ffffff'}]}];
// Create the map
var map = new google.maps.Map($('.map-canvas')[0], {
zoom: 14,
styles: mapStyle,
center: new google.maps.LatLng(40.72, -74)
});
// Add a custom marker
var markerIcon = {
path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
fillColor: '#e25a00',
fillOpacity: 0.95,
scale: 3,
strokeColor: '#fff',
strokeWeight: 3,
anchor: new google.maps.Point(12, 24)
};
var marker = new google.maps.Marker({
map: map,
icon: markerIcon,
position: new google.maps.LatLng(40.72, -74)
});
var marker2 = new google.maps.Marker({
map: map,
icon: markerIcon,
position: new google.maps.LatLng(40.72, -74.05)
});
// Set up handle bars
var template = Handlebars.compile($('#marker-content-template').html());
// Set up a close delay for CSS animations
var info = null;
var closeDelayed = false;
var closeDelayHandler = function() {
$(info.getWrapper()).removeClass('active');
setTimeout(function() {
closeDelayed = true;
info.close();
}, 300);
};
// Add a Snazzy Info Window to the marker
info1 = new SnazzyInfoWindow({
marker: marker,
wrapperClass: 'custom-window',
offset: {
top: '-72px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Complex Styles',
subtitle: 'For Snazzy Info Windows',
bgImg: 'https://images.unsplash.com/42/U7Fc1sy5SCUDIu4tlJY3_NY_by_PhilippHenzler_philmotion.de.jpg?dpr=1&auto=format&fit=crop&w=800&h=350&q=80&cs=tinysrgb&crop=',
body: '<p><em>Photo by <a href="https://unsplash.com/@philipphenzler" target="_blank">Philipp Henzler</a>.</em></p>' +
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet elit et nibh tincidunt elementum eget quis orci.</p>' +
'<p>Ut magna est, lobortis ut mollis eu, vulputate id turpis.</p>' +
'<p>Pellentesque id lacus quis orci consequat pellentesque non non purus. Mauris ligula dolor, volutpat quis blandit at, luctus luctus quam. In hac habitasse platea dictumst.</p>' +
'<p>In hac habitasse platea dictumst. In hac habitasse platea dictumst.</p>' +
'<p>Nam lorem dui, molestie nec elementum nec, lobortis sed lacus. Morbi nec tellus dolor. Etiam nec volutpat urna, pretium consectetur augue. In mattis, leo a ullamcorper venenatis, augue tortor cursus quam, nec mollis neque urna vitae lacus.</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
// Open the Snazzy Info Window
info1.open();
// Add a Snazzy Info Window to the marker
info2 = new SnazzyInfoWindow({
marker: marker2,
wrapperClass: 'custom-window',
offset: {
top: '-72px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Complex Styles',
subtitle: 'For Snazzy Info Windows',
bgImg: 'https://images.unsplash.com/42/U7Fc1sy5SCUDIu4tlJY3_NY_by_PhilippHenzler_philmotion.de.jpg?dpr=1&auto=format&fit=crop&w=800&h=350&q=80&cs=tinysrgb&crop=',
body: '<p><em>Photo by <a href="https://unsplash.com/@philipphenzler" target="_blank">Philipp Henzler</a>.</em></p>' +
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet elit et nibh tincidunt elementum eget quis orci.</p>' +
'<p>Ut magna est, lobortis ut mollis eu, vulputate id turpis.</p>' +
'<p>Pellentesque id lacus quis orci consequat pellentesque non non purus. Mauris ligula dolor, volutpat quis blandit at, luctus luctus quam. In hac habitasse platea dictumst.</p>' +
'<p>In hac habitasse platea dictumst. In hac habitasse platea dictumst.</p>' +
'<p>Nam lorem dui, molestie nec elementum nec, lobortis sed lacus. Morbi nec tellus dolor. Etiam nec volutpat urna, pretium consectetur augue. In mattis, leo a ullamcorper venenatis, augue tortor cursus quam, nec mollis neque urna vitae lacus.</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
// Open the Snazzy Info Window
info2.open();
});
This may help you:
var closeDelayHandler = function (el) {
$(el.getWrapper()).removeClass('active');
setTimeout(function () {
closeDelayed = true;
el.close();
}, 300);
};
and
afterOpen: function () {
var wrapper = $(this.getWrapper());
var el = this;
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', function () { closeDelayHandler(el); });
},
yes, this code below helped me close complex style windows when using multiple markers. however, now closeOnMapClick and closeWhenOthersOpen do not work. I can an error: "TypeError: undefined is not an object (evaluating 'el.getWrapper')"
var closeDelayHandler = function (el) { $(el.getWrapper()).removeClass('active'); setTimeout(function () { closeDelayed = true; el.close(); }, 300); };
