ThinkGeo.com    |     Documentation    |     Premium Support

GoogleOverlay not working in some browsers

#1

I’m having trouble with the GoogleOverlay not working on some browsers. It appears to work in Chrome, but not Firefox/IE/Edge. I believe this is related to one of the recent upgrades. Unfortunately I’ve only been testing with Chrome lately so I hadn’t noticed the problem until recently.

Here is the working screenshot from Chrome:

Image.png785×555 787 KB

Here is a broken screenshot in Firefox (similar in Edge and IE):

Image.png783×552 39.2 KB

Here are the only errors in the Firefox dev console:

window.controllers is deprecated. Do not use it for UA detection. opl_GeoResource.axd:583:417
window.controllers is deprecated. Do not use it for UA detection. opl_GeoResource.axd:583:417
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it.

(I think the last one has to do with DevExpress control I’m using)
Any suggestions for how to troubleshoot it?

Thanks!

#2

Hi Randy,

I build a really simple test sample 8626.zip (82.7 KB), which works well for Chrome, FireFox, IE, Safari and Opera.

Pasted image1291×1044 1.23 MB

We don’t know how you use the DevExpress in your project so we cannot test it.

When search in internet I found a topic should related with your error, you can view it to see whether that’s helpful.

If that’s still cannot solve your problem, please try to build a simple sample which can reproduce the error, so we can look into it and help you solve it.

Regards,

Don

#3

I think I’ve got it figured out. I was using Height=“100%” on the Map control, and had added a custom min-height CSS setting for the .olMap, in order to size the map. I suppose I did this originally to more easily test the various sizes in the browser dev tools without having to reload the page. Oddly enough, it works fine in Chrome, but not in IE/Edge. In Firefox it doesn’t render correctly on load, but if you resize the browser, it renders correctly. (and I know it originally worked a in all browsers when I wrote it a couple of years ago, with the older versions of ThinkGeo web edition).

Here is the previous code with the problem:

    <style type="text/css">
    /* this looks like the problem */
    .olMap, .olMapViewport {
        min-height: 550px;
    }
</style>
<div id="mapContainer">
    <cc1:Map ID="Map1" runat="server" Height="100%" Width="100%"></cc1:Map>
</div>

I realize that is a hackish approach and I don’t expect it to be supported. It was just something I had done to test with and it worked so I never changed it.

I’ve now fixed my code by setting a Height=“550px” on the Map control directly, rather than the CSS. It seems to work ok across all browsers this way.

#4

Hi Randy,

Thanks for let us know your research about that. I am not sure why min-height don’t works, but I found another solution for your scenario.

Please see my attached code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="web.WebForm1" %>

<%@ Register Assembly="ThinkGeo.MapSuite.WebForms" Namespace="ThinkGeo.MapSuite.WebForms" TagPrefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 100%">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <cc1:Map ID="Map1" runat="server" Height="100%" Width="100%"></cc1:Map>
        </div>
    </form>
</body>
</html>

I set the 100% for all the container control of the map, and it works correct for all the browser include chrome, IE 11 and firefox.

Wish that’s helpful.

Regards,

Don