Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cant handle complex style with multiple markers #32

Open
luchod opened this issue Jan 27, 2018 · 4 comments
Open

Cant handle complex style with multiple markers #32

luchod opened this issue Jan 27, 2018 · 4 comments

Comments

@luchod
Copy link

luchod commented Jan 27, 2018

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">&#215;</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">&#215;</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">&#215;</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">&#215;</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">&#215;</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();

});`
@JoeKuhns
Copy link

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.

@jerome69
Copy link

jerome69 commented Feb 5, 2019

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">&#215;</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">&#215;</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();	

});

@Exoid
Copy link

Exoid commented Mar 25, 2019

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); });
},

@davidmcoleman
Copy link

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);
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@davidmcoleman @Exoid @JoeKuhns @jerome69 @luchod