Question

I’m having some problems with google maps (api v3) when I embed them into an iframe.

When I click somewhere on the map, drag it until the cursor is out of the iframe, and release the mouse button, then the map sticks to the cursor when I move it over the map, even if I’m not pressing the mouse button anymore.

http://my.brandtr.ee/public/tmp/test-iframe.html

It seems that if the map is embedded within an iframe, then the “mouseup” event isn’t catched by the map if the user release the mouse button outside of the iframe.
This problem only occurs with webkit browsers (chrome 23, safari 6) and IE. Firefox is working fine.

Did anyone already have this problem? It’s been bugging me for days now…

Thanks in advance.

Answer 1

I’m not entirely certain what event Google Maps relies on in order to stop dragging the map, but just in playing around with your demo I noticed that it stops when you mouseup inside the iframe. If you simulate this event on mouseout of the iframe, Google Maps thinks you let go of the map there, and stops dragging.

I tried this code from inside the console and it works fine:

var iframe = document.getElementsByTagName('iframe')[0];
iframe.addEventListener('mouseout', function(e){
    var doc = this.contentDocument || this.contentWindow; // wk/moz vs. ie
    doc = doc.document || doc; // opera
    if (doc.createEvent) {
        var evt = doc.createEvent('MouseEvents');
        evt.initMouseEvent('mouseup', true, false, window, 
            0, e.screenX, e.screenY, e.clientX, e.clientY, 
            false, false, false, false, 0, null
        );
        doc.getElementsByTagName('body')[0].dispatchEvent(evt);
    } else if (doc.createEventObject) { // legacy ie
        var evt = doc.createEventObject(e);
        doc.getElementsByTagName('body')[0].fireEvent('mouseup', e);
    }
});

This works in FF, Safari, Chrome, and Opera. I took a quick look at your page in IE without applying the fix. However, it doesn’t look like the drag bug is even happening there, so it may not be worth providing for that case. Good luck!