Openlayers Google Maps layers remain blank in Internet Explorer - javascript

I've created a map page using OpenLayers. The user can select a specific thematic overlay (noise levels) by period, noise source and year.
I wanted to allow the user to choose a base (or background) layer: one of two (public) OpenStreetMap layers, the Google base layers, or one of Yahoo! Maps’ layers.
I originally wanted to provide Bing maps (Virtual Earth) as well, but since those use a different projection, I can’t use them in combination with my overlays (custom-served tiles).
It all works fine in almost all browsers: Firefox, Chrome, Safari, and Opera (if you don’t click too much). But when using Internet Explorer (versions 7 and 8), selecting one of the Google Maps layers results in a blank background.
I’ve tested with Fiddler, and the tiles aren’t even retrieved.
I’m running into a wall here.
Has anybody run into this problem before (and preferably: solved it)? Or does someone have an idea what could be going wrong?
Edit: The site is located at http://software.dgmr.nl/geluidskaart/.

See #7 of this issue, it seems to fix the problem.
Not sure, if it is directly related to your issue though.
Try removing "blank.gif" from the dark theme image folder.
It also made it work in IE.

I have had an issue before with Google base layers when using an overview window, and a mix of Yahoo and Google layers.
Try removing the Yahoo layers to see if this is the issue (or the overview map).
I believe there could be a clash of variable names with this combination of JavaScript libraries.
There is an error reported in IE in the ymapapi file:
this.MP is null or not an object
Edit: There is a problem with your CSS. The Google layer / images are loading without problems, but you have a "background: url(http://js.mapbox.com/theme/dark/blank.gif);" attribute on your Google layer. I removed this and the Google maps were displayed without problems.
This appears in your OpenLayers.Layer.Google_95_EventPane DIV.

Related

Mapbox Tile Loading Issue

While using mapbox maps, When we move the map, zoom-in and zoom-out to locations, after a certain point of time, the new images of map stop loading.
When i checked on console, the new tiles server requests stay in pending state.
This also happens with the map in the sample map at https://www.mapbox.com/mapbox.js/example/v1.0.0/
Just keep using it for a while and make rapid zoom-in and zoom-outs in the map.
Note that this is not an internet bandwidth issue, and i am also using the paid version of mapbox.
My configuration is:
Browser: Chrome Version 45.0.2454.85 m
OS: Windows 8 Pro
Mapbox version: 2.2.2
I could not reproduce this, however I had a similar issues with the tiles not loading. It turned out to be due to a div I had covering part of the map area. It seems like mapbox can detect if there is an object over the map area and will not load the tiles.
Just an idea, hope it helps.
Just diagnosed this in our office. Updating Chrome to the most recent version (48) OR disabling Tampermonkey solved the problem. As per https://github.com/Leaflet/Leaflet/issues/3198, other extensions may also trigger the same Chrome bug.

Workaround for the grey area around the map on zoom out

I am using Google Maps Javascript API for rendering a map. When we zoom out on the map there is a brief moment that we see a grey area (while waiting for new tiles). Is there any workaround for this behavior in order to provide a similar user experience as mobile devices (Google Maps SDK Android and Iphone), where we always see a map on zoom out and not that brief grey area around the map?
The grey area around the map exists because it takes time to access the image tiles over the Internet connection from the server. My presumptiosn as to the reason why the mobile version does not do this are either that they have a special function that accesses the cache instead of re-querying the image on mobile, or that mobile simply has a built-in cache of, say, the entire world at zoom levels 0-3.
In other words, I do not know of a way to avoid the grey space. To get a work-around would require re-writing a good portion of Google's code, specifically to access the browser's cache. Even if you did succeed, a first-time user of the webpage would still get the grey space simply because a cache does not already exist.
My advice is to ignore it, as it is "brief" (and likely will not have much of any impact on the user experience), and that there are no easy fixes.

Adjusting zoom levels in leaflet js removes all layers and prevents any further zoom functionality in IE11

So I have a Ruby on Rails app that uses Leaflet JS to display a rather large map file overlaid with various layers of boxes, markers, paths, etc. However, if I load the map through IE 11, once I change zoom levels from the initial value everything is removed, the map stops loading, and I can no longer change zoom levels. I do not believe it is a problem with my code for several reasons, mainly the facts that:
Everything works in Firefox and Chrome
Map works on IE version 9
Code produces no error messages in console or anywhere else
So I have to admit I'm at a near-complete loss as to the cause of this error. I've pulled the latest stable leaflet release but it didn't change anything. I'm hoping someone has a suggestion that might help out.

Google Maps Javascript API v3 - different projection of the street view on firefox

I'm using Google Maps Javascript API V3.
Everything works fine on chrome.
http://imgur.com/pOn42pR
But we get a fish-eye effect on Firefox.
http://imgur.com/lOi3vY7
It looks like they're using a totally different projection on each browser.
But the weird thing is that it works fine again on Firefox when I'm not using the API but the Google Maps directly.
Could someone deal with this problem?
Thanks! #try-catch-finally
The images are from the gogole maps api. A screenshot of two different browsers. The one of chrome is using sphere 3D effect, but the firefox one looks like a big flat image.
Okay, I think I just find a way to force the API to use the same way on both Chrome and Firefox.
And as #MrUpsidown said, I left my answer there.
But there's some problems need to be solved.
Hope you guys could move to that question and find a way out together.
I'll make this one to be closed someday.
Thanks!

Styling Google Maps API to look like Google Maps on Mac

Brief Explanation
I had not noticed this until my designer sent me a PSD of a new website including a Google Maps page with some cool features that I did not recognise...
I then investigated this further to try to find these features and where they came from. Surprisingly, the new features are only visible when you go to the Google maps page on a Mac (I was using Chrome).
See these two different screen shots:
On a Mac
On a PC (Google Maps API)
The Differences
There is a button after the search box
The Mac version has integrated Google Plus and sharing capabilities
The zoom buttons are entirely different
The map type buttons are entirely different
My Question
So with the above in mind, is there any possible way one could make the Google Maps API Map look like the one illustrated in the first image?
I have looked through the API reference and it seems that there is nothing other than a basic search box... I cannot find any information on adding 'sharing' capabilities, or restyling the zoom buttons etc.
Can one come up with an some ingenious solution to this as the design of my clients site rather depends on the features on this map?
It looks like you're being served the updated version on the Mac and the older version on the PC; The user will need to opt-in to the new service on the Google Maps site to overcome this.
If you need more control over the design of your maps then Mapbox might be useful: https://www.mapbox.com

Categories