CODEWITHSUNDEEP
javascripthtmlasp.netbing-maps
SomeoneSpecial
SomeoneSpecial

Reputation: 177

Bing Maps displays on Chrome but not IE

My project is created in Asp.net with Javascript. When I display the website in Google Chrome, it displays correctly. When I display the page in Internet Explorer 11, I am getting a blank white page.

I'm not sure what is making the map display but this is the source that displays the blank page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>

</title><meta http-equiv="CACHE-CONTROL" content="NO-CACHE" /><meta http-equiv="EXPIRES" content="Mon, 22 Jul 2002 11:12:01 GMT" /><meta id="metaDescription" name="description" /><meta id="metaKeywords" name="keywords" />
    <script type="text/javascript" src="menu/jquery.min.js"></script>
    <script type="text/javascript" src="menu/menu.js"></script>
        <script type="text/javascript" src="js/mapBing.js"></script>
        <script type="text/javascript" src="js/preloader.js"></script>
    <!--[if lte IE 7]>
        <style type="text/css">
            html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
        </style>
        <![endif]-->
    <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
    <script type="text/javascript">
        var mapPnl = null;
        var refreshRate = 30000;

        function SetMap() {
            // Set the latitude value
            var lat = document.getElementById("txtLatitude").value;

            // Set the longitude value
            var lng = document.getElementById("txtLongitude").value;

            // Check if both of the latitude and longitude have been set
            if (lng === "" | lat === "") {
                alert("You need to input both Latitude and Longitude first.");
                return;
            }

            // Set the zoom level
            var ddlzoom = document.getElementById("ddlZoomLevel");
            var zoom = ddlzoom.options[ddlzoom.selectedIndex].value;

            // Reset the map instance
            map.SetCenter(new VELatLong(lat, lng));
            map.SetMapStyle(style);
            map.SetZoomLevel(zoom);
        }

        function FindLoc() {
            var loc = document.getElementById("txtLocation").value;
            try {
                // Call VEMap.Find method to find the location
                map.Find(null, loc);
            } catch (e) {
                alert(e.message);
            }
        }

        function SetStyle(s) {
            if (s == "r") {
                style = VEMapStyle.Road;
            }
            else {
                style = VEMapStyle.Aerial;
            }
        }

    </script>
    <style type="text/css">
        .map {
            position: absolute;
            width: 960px;height:500px;border: #555555 2px solid;
        }
        .map-full {
            position: absolute;
            width: 99.7%;
            margin-left: 1px!important;
            height: 99.5%;
            border: #555555 2px solid;
        }
    </style>
    <link href="css/main.css" rel="stylesheet" type="text/css" /><link href="menu/menu.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">

    function isNumberKey(evt, ctlName) {
      var charCode = (evt.which) ? evt.which : event.keyCode;

      if ((charCode < 48 && charCode !== 36 && charCode !== 44 && charCode !== 46) || charCode > 57)
        return false;
      else {
        var ctl = document.getElementById(ctlName);
        var testStr = ctl.value + String.fromCharCode(charCode);
        testStr = testStr.replace("$", "");
        testStr = testStr.replace(",", "");
        var regex = /^\d+(\.\d{0,2})?$/;
        var output = regex.test(testStr);
        return output;
      }
    }

    function handleEnter(field, event) {
      var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
      if (keyCode === 13) {
        var i;
        for (i = 0; i < field.form.elements.length; i++)
          if (field === field.form.elements[i])
            break;
        i = (i + 1) % field.form.elements.length;
        field.form.elements[i].focus();
        return true;
      }
      else
        return true;
    }


    String.prototype.trim = function () {
      return this.replace(/^\s+|\s+$/g, "");
    }

    String.prototype.ltrim = function () {
      return this.replace(/^\s+/, "");
    }

    String.prototype.rtrim = function () {
      return this.replace(/\s+$/, "");
    }



  </script>
    <link href="/css/preloader.css" rel="stylesheet" type="text/css" /><link href="/css/report-main.css" rel="stylesheet" type="text/css" /><link href="/css/sales-report-001.css" rel="stylesheet" type="text/css" /><link href="/css/maps.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="/datepicker/css/uiall.css" />
    <script src="/js/json2.js" type="text/javascript"></script>

</head>     
<body onload="mapPnl = document.getElementById('pnlBingMap');LoadMap();" style="width:100%!important;height:100%!important">
    <form method="post" action="./MapOnePageSetup.aspx?corpid=fc324da8-c33d-4f18-80ee-90ef9d59acc9" id="Form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEyOTEwMzEyMzlkZKQR68V+zFwhUN8LTUOFSfnBfL4g4D/p2psjSBpBJbac" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="33D77860" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAMKaj5pU7stRP1FwXdoBKaH70OchO7F3BG3PsQTkLswd42JiOf78gvdVVuqV78pYrn7l9nCSLMU+dKBxvBWgFKB1cVZEYO3VoKWulo0s9Hf/g==" />
</div>
        <div class="content">
            <div id="preloader" style="display: none">
                <div id="status">
                    <img src='images/status.gif' alt='' /><br />
                    <span class="small-grey">Please wait</span>
                </div>
            </div>
            <input type="hidden" name="hfStartDate" id="hfStartDate" />
            <input type="hidden" name="hfFinishDate" id="hfFinishDate" />
            <span id="lblError" style="visibility:hidden;width:0px;height:0px;"></span>
            <div id="timeDiv"></div>            
            <div>
                <div id="pnlBingMap" class="map-full">


</div>
            </div>
        </div>
    </form>

</body>
</html>

This is the original MapOnePageSetup.aspx source:

<%@ Page Language="c#" AutoEventWireup="true" CodeFile="MapOnePageSetup.aspx.cs"
    Inherits="SinglePageApplication.MapOnePageSetup" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
    <meta http-equiv="EXPIRES" content="Mon, 22 Jul 2002 11:12:01 GMT" />
    <meta name="description" content="" runat="server" id="metaDescription" />
    <meta name="keywords" content="" runat="server" id="metaKeywords" />
    <script type="text/javascript" src="menu/jquery.min.js"></script>
    <script type="text/javascript" src="menu/menu.js"></script>
        <script type="text/javascript" src="js/mapBing.js"></script>
        <script type="text/javascript" src="js/preloader.js"></script>
    <!--[if lte IE 7]>
        <style type="text/css">
            html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
        </style>
        <![endif]-->
    <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

    <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
    <script type="text/javascript">
        var mapPnl = null;
        var refreshRate = 30000;

        function SetMap() {
            // Set the latitude value
            var lat = document.getElementById("txtLatitude").value;

            // Set the longitude value
            var lng = document.getElementById("txtLongitude").value;

            // Check if both of the latitude and longitude have been set
            if (lng === "" | lat === "") {
                alert("You need to input both Latitude and Longitude first.");
                return;
            }

            // Set the zoom level
            var ddlzoom = document.getElementById("ddlZoomLevel");
            var zoom = ddlzoom.options[ddlzoom.selectedIndex].value;

            // Reset the map instance
            map.SetCenter(new VELatLong(lat, lng));
            map.SetMapStyle(style);
            map.SetZoomLevel(zoom);
        }

        function FindLoc() {
            var loc = document.getElementById("txtLocation").value;
            try {
                // Call VEMap.Find method to find the location
                map.Find(null, loc);
            } catch (e) {
                alert(e.message);
            }
        }

        function SetStyle(s) {
            if (s == "r") {
                style = VEMapStyle.Road;
            }
            else {
                style = VEMapStyle.Aerial;
            }
        }

    </script>
    <style type="text/css">
        .map {
            position: absolute;
            width: 960px;height:500px;border: #555555 2px solid;
        }
        .map-full {
            position: absolute;
            width: 99.7%;
            margin-left: 1px!important;
            height: 99.5%;
            border: #555555 2px solid;
        }
    </style>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="menu/menu.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">

    function isNumberKey(evt, ctlName) {
      var charCode = (evt.which) ? evt.which : event.keyCode;

      if ((charCode < 48 && charCode !== 36 && charCode !== 44 && charCode !== 46) || charCode > 57)
        return false;
      else {
        var ctl = document.getElementById(ctlName);
        var testStr = ctl.value + String.fromCharCode(charCode);
        testStr = testStr.replace("$", "");
        testStr = testStr.replace(",", "");
        var regex = /^\d+(\.\d{0,2})?$/;
        var output = regex.test(testStr);
        return output;
      }
    }

    function handleEnter(field, event) {
      var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
      if (keyCode === 13) {
        var i;
        for (i = 0; i < field.form.elements.length; i++)
          if (field === field.form.elements[i])
            break;
        i = (i + 1) % field.form.elements.length;
        field.form.elements[i].focus();
        return true;
      }
      else
        return true;
    }


    String.prototype.trim = function () {
      return this.replace(/^\s+|\s+$/g, "");
    }

    String.prototype.ltrim = function () {
      return this.replace(/^\s+/, "");
    }

    String.prototype.rtrim = function () {
      return this.replace(/\s+$/, "");
    }



  </script>
    <link href="/css/preloader.css" rel="stylesheet" type="text/css" />
    <link href="/css/report-main.css" rel="stylesheet" type="text/css" />
    <link href="/css/sales-report-001.css" rel="stylesheet" type="text/css" />
    <link href="/css/maps.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/datepicker/css/uiall.css" />
    <script src="/js/json2.js" type="text/javascript"></script>

</head>     
<body onload="mapPnl = document.getElementById('<%= pnlBingMap.ClientID %>');LoadMap();" style="width:100%!important;height:100%!important">
    <% if (Request.QueryString["corpId"] != null)
       { %>
    <form id="Form1" runat="server">
        <div class="content">
            <div id="preloader" style="display: none">
                <div id="status">
                    <img src='images/status.gif' alt='' /><br />
                    <span class="small-grey">Please wait</span>
                </div>
            </div>
            <asp:HiddenField runat="server" ID="hfStartDate" />
            <asp:HiddenField runat="server" ID="hfFinishDate" />
            <asp:Label runat="server" ID="lblError" style="visibility:hidden;width:0px;height:0px;"></asp:Label>
            <div id="timeDiv"></div>            
            <div>
                <asp:Panel ID="pnlBingMap" CssClass="map-full" runat="server">
                </asp:Panel>
            </div>
        </div>
    </form>
    <% } %>
</body>
</html>

Is there a way to determine from the source what is making the page display? If not, how do I debug IE to determine why it wouldn't display?

Any assistance would be appreciated!

Upvotes: 0

Views: 446

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

Looks like you are using the map script URL for Bing Maps version 7 which is retired and will be shut down very soon. You need to migrate to version 8. Here is a migration guide: https://social.technet.microsoft.com/wiki/contents/articles/34563.bing-maps-v7-to-v8-migration-guide.aspx

However, looking at your code, it appears you are using version 6 syntax which doesn't exist in Versions 7 or 8. Version 7 was a complete rewrite. Version 8 is about 95% backwards compatible with V7. Here is a migration guide from V6 to V8: https://social.technet.microsoft.com/wiki/contents/articles/34568.bing-maps-v6-3-to-v8-migration-guide.aspx

Upvotes: 1

Related Questions