jQuery - Colorbox is loading content with Google Maps multiple times

Question

this is driving me crazy. All the colorboxes in my site are working great. But when I try to open one with a google map inside it opens with two or more maps!! I tried both API maps, and iframe embedded ones.

Sometimes, when I open other colorboxes in my site first, it repeats the google maps many many times.

If I do nothing but go to open the map, the colorbox opens with 2 maps. It's driving me insane!

This is the specific code I'm using to open the colorbox:

        $(document).on('click', '.btn_map', function (e) {
            var salonId = $(e.currentTarget).attr('id').substr(4);
            $.colorbox({
                width:"715px",
                height:"568px",
                title:false,
                iframe:true,
                open:true,
                href:"content/map.php?id="+salonId
            });
            return false;
        });

I read on other questions to user href:this.href

But when I tried that, the colorbox begins to open, and suddenly it loads as a new page.

Here is the site in question:

http://testing.fyrastudio.com/lab/gaf/angarano/

In order to reach the troublesome colorbox, you have to go to SALONI, then select any REGIONE and CITTA and click on INVIA. Once the table is populate, at the end of each row you will see the link "vedi mappa". That opens the colorbox.

Ahhh I almost forgot. When you open the map alone here:

http://testing.fyrastudio.com/lab/gaf/angarano/content/map.php?id=1

It works perfectly, so I don't think the problem is there.

jQuery is 1.9.1 Colorbox is 1.4.3

So I think they are both the latest.

I appreciate any kind of help. Thanks!!

Answer 1

It appears that the click-handler is attached twice. I can't see where it happens, but you may try to avoid this by removing previously attached click-handlers:

$(document).off('click', '.btn_map')
  .on('click', '.btn_map', function (e) {/*your code*/});