Google maps : when zoom, infowindow text selected

Question

I'm using google maps API V3. I have added some markers with infowindows on my maps. The content of my infowindow is selected after a double clicking (zoom). It is not that user friendly...

Let's have an example: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=fr

1. Double click somewhere on the map for zooming
2. Click on the marker to show up the info window
3. The text of the infowindow is selected.

Do you know how to avoid selection of that text in the infowindow? Thanks.

Answer 1

I finally found myself the answer:

(function($){
            $.fn.disableSelection = function() {
                return this
                .attr('unselectable', 'on')
                .css('user-select', 'none')
                .css('-moz-user-select', 'none')
                .css('-khtml-user-select', 'none')
                .css('-webkit-user-select', 'none')
                .on('selectstart', false)
                .on('contextmenu', false)
                .on('keydown', false)
                .on('mousedown', false);
            };
})(jQuery);

Then, for my gmaps div :

$(document).ready(function () {
   $('#googleMaps').disableSelection();
}

Answer 2

Adding the CSS property user-select to the map container did the job for me. No Javascript needed.

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

or if you're using Sass and Compass: +user-select(none)