Google Maps V3 within a jQuery UI dialog for IE7/8 - javascript

I have problems visualizing my google map within a jquery dialog. The problem is present only on ie 7 and ie 8, furthermore ie7 doesn't even show the map, ie8 shows it once and when you try to see it again, the map is misplaced.
Here is the scenario. I have a link which when precessed would show a dialog. The content of the dialog is loaded via ajax. The loaded page contains some other stuff apart from the map itself. In ie7 i don't see the page at all, i8 shows it correctly the first time around. When you close the dialog and open it again the map would no longer be visible.
The issue(s) is not present on all real browsers and ie9,but i found something strange. When the dialog is opened for the second time and I have dev tools open ( the developer plugin for IE) when I close it, or minimize the dev tools panel , the map is somehow refreshed and gets displayed correctly. Any idea what event my that be triggering. Any help would be appreciated.
Thanks,
Peter

Call the initialise function after dialog opens. For example, onfocus of a button or textbox.
onfocus="initialise();";
it works for me.... even in IE

Pretty sure gmaps v3 doesn't support IE7, the IE8 problem is kinda hard to assist you with without seeing the code.

The Google Maps JavaScript API V3 does support IE7+ (Source: Which web browsers does the Google Maps JS API support?) but I've seen issues when combining it with jQuery, sometimes they kinda collide on some object's property and mess up. Maybe you could cut this down to the simplest code possible and report it on the issue tracker?

Related

Mapbox GL JS : Fullscreen and GPS button Issues in Chrome only

I am working on a weather visualization project using Mapbox (3 panes are locked together and one is for navigation, it's hard to explain until you see the link.)
Before I continue, I will post a link to the web app I am discussing here, so you can see it. My code is a MESS, and I am aware of that, but I believe this is a browser issue.
http://ability.a2hosted.com/main.html
In Edge and Firefox, the fullscreen and navigation buttons work fine. In Chrome, they do not work... the fullscreen button gets the browser stuck until you press escape (and doesn't render properly anyway!). And, in fact, chrome does not even display the navigation button at all.
Is there a way to get these buttons to show up and function as they do in firefox and edge? Or, maybe an alternate button? I am attaching a screenshot of how the page should look.
I should note, I can live without the fullscreen buttons, but I need the navigation button option to be working in chrome. This really is a must for my project, so even if there's another link or button I could place over it to activate it somehow, it's fine as long as it works. I am not good enough with JS to understand what may be causing this issue after 2 hours of research.
From https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol:
Not all browsers support geolocation, and some users may disable the feature. Geolocation support for modern browsers including Chrome requires sites to be served over HTTPS. If geolocation support is not available, the GeolocateControl will not be visible.

Google Invisible reCAPTCHA breaks Firefox JavaScript

I have tried pretty much every which way to configure the Google Invisible reCAPTCHA widget, but there is always an issue with the latest Firefox browser, detailed as follows:
add the plugin to a web page, which has other JS such as a dropdown menu
load the web page
keep loading the web page over and over, in an attempt to catch it 'half loaded'
eventually you will see for a split second an alert "The page at https://www.google.com says: Cannot contact reCAPTCHA. Check your connection and try again"
from now on, JavaScript is entirely broken until you restart the Firefox window
This never happens in Chrome, and appears to be Firefox only. I am surprised to not find any reports of this major issue with vendors Google and Firefox (unsure which party is to blame), so created this ticket.
This issue can be replicated on the official Google Invisible reCAPTCHA Demo by quickly reloading the page. This will eventually show the alert and break the entire demo, making all form inputs unresponsive until the Firefox window is closed and re-opened.
At the time of writing, I am using OSX Firefox 57.0.1 (64-bit) to replicate this issue, but has also been replicated on the same Firefox under Windows 10.
Update after valid comment from Federico, as this is being reported a lot but no solutions or workarounds that I can find: Google Groups Search
Is this a known issue and are there any plans to resolve from either Firefox or Google, or more importantly has anybody managed to put a workaround in place in the meantime?
I think the issue is resolved now. Try again and it is giving successful verification. I guess it was a bug which they fixed. If the problem still persists please try upgrading Firefox to the latest version.

Does Chrome treat google map loading differently?

I'm testing this page - it's live but not really public yet. http://info.iste.org/student-standards-contest
It is auto jumping to the start of the map (the header covers it a bit) in Chrome but not firefox or Safari. Does anyone know of a reason for this? My initial search attempts are not showing up anything promising. Does Chrome treat maps differently? Or are there any particular scripts that Chrome treats differently? I got the code to place the map direct from Google Fusion Tables if that is helpful.
This is a difference in browser behavior, but it's not because of google maps. You can see this by taking these steps:
Open a new tab in chrome
Open the console (ctrl + shift + i)
Go to the network tab of your console
Set connection to something very slow such as GPRS
Load the page
You'll see that the page does it's jump before google maps is even loaded. It's the other elements that are loaded onto the page shifting things around. Why Chrome does this and Firefox does not is probably some very minor difference in interpreting the page. There's a lot going on with that page so tough to say looking at it from the outside. Try removing elements that are loaded onto the page one by one and figure out which element is causing the jump.

Google Chrome bug not loading google maps, jQuery functions on ajax call

Here is my problem. First I load the site and everything works fine. Then I click on a link and it calls Ajax for new page. Data that is returned contains HTML and Javascript. Some javascript functions works fine, like click function. But google maps don't want to load, mouseover functions works but doesn't want to show/hide ( btw alert function works).
But there is a trick. If I open Developer Tools (right click -> inspect), somehow google maps shows up and functions start working.
I know this is a bug, does anyone know how to go around it?
And there is a Warning: (2) event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future. I have jQuery version 1.7.1.
The problem was empty <progress> tag.
When I removed it from my form, everything was working normaly. Strange.

GMap Problem with Certain Browsers

I'm attempting to implement gMap [1] on a website and I've got it partially functioning. The map shows up properly in Chrome and Safari but fails in Firefox, IE, and Opera (latest versions of all). I have the Google Map API key loading as the first javascript resource in my header, followed by jQuery and then finally my call at window load (in aaolm.js). Essentially what happens in the browsers that fail is that the map is partially rendered with the Google Maps controls but the actual map view is blank. In Chrome and Safari the map renders with no problems. The below page is an example of what's happening:
http://www.advancedaquarist.com/events/reefstock-march-12-2011
I'm really at a loss as to why this is happening. Any help would be appreciated. Thanks!
[1] http://gmap.nurtext.de/examples.html
I had this issue as well. Seems that a very common "responsive design" technique (img{max-width:100%;}) is to blame. If you can undo this by a max-width: none; on the images within the map divs, you're all set.
Its going to be a div sizing issue..
Try making the div that contains your map a specific size, rather than 100%.. and you will probably find your map appears..
There's a bit of info here:
http://econym.org.uk/gmap/basic19.htm
Duncan.

Categories