This is not a comment

i am facing the same problem in ie10 with windows7. if you have solution that please reply me as early as possible. thanks in advance.

Same problem!

Broken with Windows 7 & IE10.

Does anyone know how to solve this ???

But not on all win7's with IE10.... I have a win7 installation with IE10 and don't have the error on the exact same website that our customer is testing on - but the customer has the visual error. The customer has at first glance the same setup. 

Same problem!

Broken with Windows 7 & IE10.

Does anyone know how to solve this ??? [2]

Occurs in some of the machines I tested with windows 7 and IE 10.

print attached.

	Erro visual controle direcional gmaps v3.jpg 424 KB   View   Download

Confirmed IE10, windows 7, Documentmode: IE 10 standard

	Sem Título.png 240 KB   View   Download

Same problem here, looking for a solution, IE10.

I am unable to replicate this on two different Win7/IE10 machines, in the example provided or on https://google-developers.appspot.com/maps/documentation/javascript/examples/full/control-options

Can anyone provide more details? Known URLs, machine hardware, fully updated Windows? etc
If someone has a bit of web developer experience and can look at the DOM structure/CSS for the control in IE's devtools and see if something is obviously wrong there (or can provide a screenshot), that may also help narrow down the problem.

Here's an IE 10 installation on Windows 7 Pro 64 bit that has the problem on the test page https://google-developers.appspot.com/maps/documentation/javascript/examples/full/control-options

Don't hesitate to ask if you need more information or if there is something you want me to check in the debugger.

	IEAboutScreen.png 46.7 KB   View   Download

	System.jpg 266 KB   View   Download

	IE10Debug.png 297 KB   View   Download

Here's screenshots to corroborate problems.

As a bit of a fluke, removing position:absolute from the down arrow seemed to fix the problem for that arrow.

	Capture.PNG 74.1 KB   View   Download

	dev tools - broken.PNG 127 KB   View   Download

	dev tools - fixed.PNG 128 KB   View   Download

Thanks for the help. A very odd bug, as the whole pan control is a single image, and the individual arrows are in that image (it's just the click targets that are divs on top). We'll look into it.

Seems to be something with the opacity vale of 0.01 on the pan divs. If set the opacity to 0, then it works fine in IE.

e.g. using the following jQuery fixes it for me.

        function fixPanHandles()
        {
            //fix bug with IE and gmaps pan hotspots.
            var panHandles = $('#gmap-canvas div[title^="Pan"]');
            panHandles.css("opacity", 0);
        }

Now I just need to figure out a good place to call this. The init and option callback functions seem to happen too early and the divs don't exist yet.

--Eric

Eric,

Right after your code to create the Map object add this one time idle listener. I included a 500ms timeout before running your code just to give the UI a little extra time to run and make sure the pan controls are there and available for manipulation.

var map = new google.maps.Map(...);
google.maps.event.addListenerOnce(map, 'idle', function() {
  setTimeout(function() {
    $('#gmap-canvas div[title^="Pan"]').css('opacity', 0);
  }, 500);
});

Thanks Jeremy,

I came up with a similar solution, given I'm using the jQuery GMap plugin rather than the API directly. My solution avoids the timer by not doing a one-time event listener. I wasn't sure if there would be any actions that might end up resetting the fix, so I felt this was a little safer in that it would keep applying it on each idle event.


        var $map = $('#gmap-canvas').gmap({...});
        var gMap = $map.gmap('get', 'map');
        $(gMap).addEventListener('idle', function () {
            fixPanHandles();
        });

Hopefully a real fix will be implemented soon.

There is one other issue that is evident in some of the screen captures here, but hasn't been mentioned explicitly.  The Zoom control, when SMALL, displays two + signs rather than + over -.

	Capture.PNG 7.8 KB   View   Download

If you're using the default zoom control, it will switch between SMALL and LARGE depending on the browser window (or map size).  The pan control is also rendered again as the browser window changes for whatever reason.  So, using Jeremy's code, I found this works to fix the SMALL zoom control and the pan control whenever the browser window changes.

	google.maps.event.addListener(map, 'idle', function() {
	  setTimeout(function() {
		$('#gmap-canvas div[title^="Pan"]').css('opacity', 0);
		if ($('#gmap-canvas div[title^="Click to zoom"]').css('opacity')!='1')
			$('#gmap-canvas div[title^="Zoom"]').css('opacity', 0);
	  }, 500);
	});	

Of course the biggest problem about this work around is it only works for English. Just add a different language parameter to your Google Maps API URL (ex. "language=es") and the title based jQuery selectors will no longer work.

Each will do according to their language. Of course this will not be the ultimate solution, but it will help while the bug is not resolved by the API.

ps. translated with 'Google Translate' ;)

Hello, that's my fix with plan JavaScript:

https://gist.github.com/voidplus/6140032

Came across this issue too and used #21's idea but modified the "getElementById" as such:

    google.maps.event.addListener(map, 'idle', function () {
        setTimeout(function () {
            var el = document.getElementById(map.getDiv().id),
                    nodes = el.getElementsByTagName('*'), i, t;
            for (i = 0; i < nodes.length; i++) {
                t = nodes[i].getAttribute('title');
                if (t === "Pan left" || t === "Pan right" || t === "Pan up" || t === "Pan down") {
                    if (nodes[i].style.opacity !== 1) {
                        nodes[i].style.opacity = 0;
                    }
                }
            }
        }, 150);
    });

This would address the scenario when there is no jQuery installed for the website / webpage.

Hope it helps.

Found a simple solution, which loads immediately, and does not require event listeners.

 $('<style type="text/css">').html('div[title^="Pan"]{ opacity: 0 !important; }').appendTo('head');

I've been noticing this problem for some time when I do some occasional test on IE10 at work. However, yesterday I tried with two different computers with IE10 and both worked flawlessly!

That immediately made me wonder if could be the result of crappy drivers (despite fully updated), or just hardware problems (if not IE10 not correctly checking the hardware capabilities). After disabling hardware acceleration, the issue disappeared (which in my case I was also affected in GoogleMaps v2, not only v3).

If you want to test, remember that after enabling "Use software processing instead of GPU processing" (doing my best in translating the option from Spanish), you need to close IE and open it again (you won't be warned to do so, but nevertheless is required to see any change).

My computer here is equipped with this motherboard: http://www.intel.com/cd/products/services/emea/eng/motherboards/desktop/dg41rq/overview/411857.htm (I'm using its on-board video chip)

Video driver: "Intel(R) G41 Express Chipset"; date: 2011-02-11; provider: Intel Corporation; version: 8.15.10.2302; signer: Microsoft Windows Hardware Compatibility Publisher
OS: Windows 7 Professional (64-bit)
RAM: 4 GB
Processor: Core 2 Duo E7500

	HardAccelDisabled.png 311 KB   View   Download

	HardAccelEnabled.png 311 KB   View   Download

The solution below only works if your map is in english:
$('<style type="text/css">').html('div[title^="Pan"]{ opacity: 0 !important; }').appendTo('head'); 

This problem is on IE11 as well. Any real solution? 

We shouldn't be using javascript for a styling fix. I just added the styling to my CSS:

.gmnoprint div[title^="Pan"]
{
    opacity: 0 !important;
}

When you using various language (such as "ko")
you can see: 
<div title="좌측으로 이동">..</div>
<div title="우측으로 이동">..</div>

So, my CSS is:
.gmnoprint div[title~="이동"]
{
    opacity: 0 !important;
}

Cheers!

@[email protected] 
.gmnoprint div[title^="축소"]
Should be added(in small control)

so,

.gmnoprint div[title~="이동"],.gmnoprint div[title^="축소"]
{
    opacity: 0 !important;
}

 Issue 8400  has been merged into this issue.