Issue with Google Map Pan Control Displayed Incorrectly on Internet Explorer 11

Currently, I am utilizing the Google Maps API v3 within my application. However, I have encountered an issue where the Maps Pan control is not displaying correctly on Internet Explorer 10 and 11.

Interestingly, it seems to be functioning properly on Chrome, Mozilla, IE8, and IE9. Unfortunately, I am struggling to find a resolution to this problem.

Upon exploring Stackoverflow, I came across a question similar to mine regarding the Google Maps zoom control, but unfortunately, no practical solution was provided. It appears to be related to a CSS issue, yet attempts to resolve it have been unsuccessful so far despite inspecting for any interfering css classes via IE developer tools.

Has anyone else experienced a similar dilemma or possibly found a workaround for this particular challenge?

EDIT: I have also noticed that the basic map itself looks disordered in my version of IE 11.![enter image description here] -- Anil

cssgoogle-mapsinternet-explorergoogle-maps-api-3

Answer №1

According to the suggestion from @geocodezip, there is still a bug in the Google Maps API that has not been fixed yet. The best solution for this issue is to apply some CSS.

Simply add the following CSS code to your page:

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

This should help other users experiencing the same problem and save them time.

-Anil

Answer №2

After incorporating the styling into my CSS and making necessary adjustments,

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

Answer №3

A key consideration for non-English versions: When it comes to styling, make sure to use the text that is specific to your region instead of "Pan". For instance, in Russian localization - "Пан". Simply hover over the pan Control button and observe the pop-up tooltip. The first 3 letters from it are typically utilized in the styling.

Answer №4

In my experience, the CSS code provided above did not fully address the issue as there was an additional zoom in/out control for street view. To rectify this, I made a minor adjustment to hide all title items except for the specific one that needed to remain visible.

.gmnoprint div[title]
{
    opacity: 0 !important;
}
.gmnoprint div[title^="Exit Street View"]
{
    opacity: inherit !important;
}

Answer №5

I may be a bit behind the curve, but I recently encountered this issue and found a solution for my applications that use Google Maps V3. While it may have similarities to solutions already discussed here, I wanted to share in case it can help others who are dealing with frustrating issues like this!

<script>
        var doc = document.documentElement;
        doc.setAttribute('data-useragent', navigator.userAgent);
    </script>
    <style type="text/css">
    html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
     {
            opacity: 0 !important;
     }
     html[data-useragent*='Trident/7.0'] div[title^="Pan"]
     {
            opacity: 0 !important;
     }
    </style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with focus transition animation not functioning properly when unfocusing an HTML input field

Hey there! I'm currently working on styling a basic input, and I'm having trouble getting the unfocus animation to work properly. Can anyone help me figure out what's going wrong? I've tried commenting out the all: unset line and expl ...

htmlcssvue.jscss-transitions

Select a division and retrieve the identification of a different division

I am looking to trigger an event by clicking on one element and extracting the ID from a separate, unrelated div. Here is my attempt: $(".map_flag").on("click",function(){ var selectedID = ($(this).attr("data_modal")); $("#" + selectedID).fade ...

javascriptjqueryhtmlcss

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

I have encountered an issue with my anchor links. All of them are working properly except for the one in the second ul with an href="page1". Interestingly, the link shows the correct destination at the bottom left of my screen and works when I right-click ...

htmlcss

Tips for expanding full screen slider dimensions

I am currently working on a website project using ASP.NET MVC Core 1.1.2. I want to create a full-screen slider for the homepage that appears stretched both on desktop and mobile browsers. However, when I view the slider on my browser, there is an annoying ...

jqueryhtmlcss

Conceal a text field depending on the value within a hidden field that was populated automatically by a JavaScript function

I encountered a peculiar issue recently. I have a form with a field for entering card numbers. There is a JavaScript code that automatically detects the type of card (such as Maestro, Visa, etc.) based on the entered number. If the detected card type is &a ...

javascriptjqueryhtmlcssforms

Is there a way to add default text to a number input field that already has a value?

My current HTML input code is as follows: <input type="number" min="4" max="100" step="1" name="myInput" value="33"> The value of this input field is being populated from a cookie or storage that was set on a previous screen where the user provided ...

htmlcssinput

Execute scroll to top animation but without utilizing $('html,body').animate({scrollTop: 0}, 'slow')

As someone who is just starting to explore jQuery, I hope you can bear with me. I've implemented this styling: html, body{ height: 100%; overflow: auto; } Along with this script: $(document).ready(function() { $('#guide-wrap'). ...

jquerycssjquery-animatescrolltop

Are Stacked DIVs with Variable Height Top DIV Compatible with CSS?

I am currently experimenting with stacking two boxes on my mobile web application view using HTML/CSS. I prefer not to utilize JavaScript or hardcode values in this basic design. Specifics: The top box must have a dynamic height, with contents that ar ...

htmlcssdynamiccss-tables

Text above the accordion header

I am currently utilizing an accordion component from the Bootstrap 4 library and it is functioning properly. However, I have encountered an issue when the header contains a very long title as shown below: <div class="accordion" id="accordionExample"> ...

csstwitter-bootstrapbootstrap-4

The alignment of bullets in CSS property list-style-position is off

I'm encountering an issue with aligning the list items. I've been using the CSS property list-style-position: inside; Typically, the bullet points appear outside of the text, like this: https://i.stack.imgur.com/LcVB0.png This doesn't seem ...

htmlcss

What is the reason that the 'mouseenter' event only applies to the initial element in each round of iteration within a spacebar loop?

My goal is to create an off-canvas menu within a template component. I found inspiration from this helpful article. The setup I have is quite common: A container tab where I loop through an items collection An item component that contains the off-canvas ...

javascriptcssmeteormouseenterspacebars

Is it possible to use Primefaces tooltip to show at the bottom of the page

When I hover over the PrimeFaces tooltip, it displays at the bottom of the page. Here is my code and image link: <!DOCTYPE html> <h:html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com ...

jquerycssjsfjsf-2primefaces

Ways to eliminate the influence of parent containers on child controls

Q: I'm encountering an issue with my date picker implementation using RadDatePicker within a table td and multiple containers (div). The problem arises from the navigation text being reversed - ">>" instead of "<<", ">" instead of "< ...

asp.netcsshtmltelerikdatepicker

Tips for positioning two elements side by side on a small screen using the Bootstrap framework

Greetings! As a beginner, I must apologize for the lack of finesse in my code. Currently, I am facing an issue with the positioning of my name (Tristen Roth) and the navbar-toggler-icon on xs viewports. They are appearing on separate lines vertically, lea ...

javascripthtmlcsstwitter-bootstrap

How to style tags between select options in HTML using React JS?

Is there a way to customize the appearance of a span element that is nested within an option tag? <select> <option value="option1">Active Wallet <span style={{fontWeight:'bold!important'}}>mBTC</span></o ...

htmlcssreactjs

Invalid Value Provided for CSS Clip Path

I'm currently attempting to design a sophisticated clip-path using a logo in CSS, but I keep receiving an error stating "Invalid Property Value." The X and Y coordinates have been computed based on dimensions of 508px x 190px https://i.sstatic.net/Yh ...

htmlcss

Tips for flipping the content of an accordion button in Bootstrap 5

Looking for help with customizing an accordion button on a website with Arabic content. The issue is that I need to reverse the content within the accordion-button (the question on the right, and the down arrow on the left). Any suggestions on how to sol ...

htmlcssalignmentarabicbootstrap-5

Size attribute set to 0 for an HTML input element

When an input element is rendered, it should have a width of 0. However, when there is no text in the input, the width should remain 0. To achieve this, you can use the following jQuery code: $('input').on('input', function () { $(th ...

javascripthtmlcss

Ways to remove a row from a div element in JavaScript without relying on tables

Hey everyone, I'm looking for a way to delete a row within a div when a delete button is pressed using JavaScript. The catch is that I need to accomplish this without using a table, only with div elements. Can anyone provide a solution for me? func ...

javascripthtmlcss

What techniques can be used to implement a diagonal gradient using CSS3?

Looking to make a responsive button? Take a look at this image: https://i.sstatic.net/23GsY.jpg I've attempted recreating it with CSS3, as embedding the image directly wasn't giving me the desired responsiveness. The challenge lies in creating ...

htmlcssbuttongradient