none
Bing map v8 with IE11 RRS feed

  • Question

  • Hi there,

    I upgraded the code from v7 to v8. The code works in chrome/Edge. in IE11, the code works when I am running debugger tool with always refresh from server.

    Now I clear cache and run in normal mode. the first time map renders with pushpin properly. next time onwards it just shows map center. If I delete only bing related js files from cache, it works again.

    I am surprised to find that behaviour.


    Thanks, Ashish | Please mark a post helpful/answer if it is helpful or answer your query.

    Thursday, September 28, 2017 6:11 AM

Answers

  • Browsers load things differently, sometimes one may load things a bit faster and be more async in nature. This is fairly common and have seen this in a lot of different apps, not just those using bing maps.

    your understanding of my recommendation is correct.


    [Blog] [twitter] [LinkedIn]

    Sunday, October 1, 2017 3:52 PM
  • A couple possible issues. The first is the "this" in the module load callback, may not be the same "this" that was outside of it. Try using var self = this; out side of the map load function and then inside, replace "this" with "self".

    Also try adding a breakpoint inside the module load callback. If your code never gets there, verify that your code actually does try to load the module, if it does, then it is possible that your environment is preventing the module functionality from loading the search module. This happens in certain environments as it won't allow dynamically loaded scripts to then load dynamic scripts for security reasons.


    [Blog] [twitter] [LinkedIn]

    Monday, October 9, 2017 5:54 PM

All replies

  • are you seeing any errors in the console. V8 loads asynchronously so it's possible that sometimes tour code may try to run before the map API is fully loaded. Can you provide a simple code sample that reproduces your issue?

    [Blog] [twitter] [LinkedIn]

    Thursday, September 28, 2017 1:45 PM
  • Just thinking about this. It is possible that if you are using a callback in the map script URL and the map API is cached, that it could be trying to call your callback before your custom code is loaded. Try moving the map API script tag such that it is after the script tags for your code.

    [Blog] [twitter] [LinkedIn]

    Thursday, September 28, 2017 2:06 PM
  • Hi Ricky, thanks for getting back to me.

    scenario is - I have a SharePoint list, which has addresses with it. Based on item id (which is passed as query string), first I need to query the item from SharePoint, read location address, initialize a deferred object, pass address to Map.search.geocode with success and error callback, deferred obj promised. in the calling function I check when (obj).done( then I make the map and pushpin with infobox.

    There is a html, html local script, associated script and a class style js script.

    <Code Removed after discussion>

    -----------

    As mentioned, it worked on Chrome/Edge. IE 11 with always refresh from server option of debug mode.


    Thanks, Ashish | Please mark a post helpful/answer if it is helpful or answer your query.


    Friday, September 29, 2017 2:56 PM
  • Why are you lazy loading the map script like this? This looks really odd and is almost certainly the cause of your issue. I suspect that all the other code you have is taking longer than a second to load and thus, when the map control is cached, even with a 1 second delay, it is still loading and calling the DrawMap function before the rest of your code is loaded. Either increase the delay time in the timeout (not recommended, but will likely work), or add the map script as a proper JavaScript tag to the bottom of your HTML page in the body, this way it is the last thing to be loaded.


    [Blog] [twitter] [LinkedIn]

    Saturday, September 30, 2017 3:57 PM
  • Hi Ricky, could you please clarify as why this code would work on Chrome/Edge, but why not in IE11?

    I know that there is some problem with cached Bing JS files, where the second js file code can't call the handlers done part and thus not loading map property.

    As you suggest, either increase the delay time or create a script tag at last in the HTML page body might solve the problem. Could you please confirm that I understood the recommendations correctly?

    Also do you confirm that using script tag as proper script tag in HTML page and re-writing code to make it sequential (rather complex class design) will be better? I have similar functionality as sample https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Infobox/Infobox_PushpinClick.html has. Only different is that I have to get SharePoint list item values for creating the data.


    Thanks, Ashish | Please mark a post helpful/answer if it is helpful or answer your query.

    Sunday, October 1, 2017 1:19 PM
  • Browsers load things differently, sometimes one may load things a bit faster and be more async in nature. This is fairly common and have seen this in a lot of different apps, not just those using bing maps.

    your understanding of my recommendation is correct.


    [Blog] [twitter] [LinkedIn]

    Sunday, October 1, 2017 3:52 PM
  • I was able to follow the https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Search/Geocode.html and create my map solution. But this gave me an interesting thing to explore. I would like to hide my map rendering logic in a common script file. I need to just built html and basic JS as below.

    Why the geocode is not calling recursively in below commonscript.js?

    HTML page - 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>School alocations</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <style type="text/css">
            .loading {
                margin-left: 250px;
            }
        </style>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
                function DrawMap() {
                    RegisterSod("PageScript.js", "../Style Library/BingMap/PageScript.js");
                    RegisterSodDep("sp.js", "PageScript.js");
        SP.SOD.executeFunc("sp.js", "SP.ClientContext", function () {
                        SP.SOD.executeFunc("PageScript.js", "PageScript", function () {
        });
        });
                }
        </script>
        <script type="text/javascript" src='https://www.bing.com/api/maps/mapcontrol?callback=DrawMap'></script>
    </head>
    <body>
        <br />
        <img class="loading" src='/_layouts/images/gears_an.gif' alt="Loading..." id="imgLoading">
        <div id="map-canvas" style="height: 550px; border: 1px solid #000000; margin-left: 10px"></div>
    </body>
    </html>

    Page Script -

    RegisterSod("CommonScript.js", "/sites/ers/Style Library/BingMap/CommonScript.js");
    RegisterSodDep("sp.js", "CommonScript.js");
    $(document).ready(function ()
    {
        SP.SOD.executeFunc("sp.js", "SP.ClientContext", function ()
        {
            SP.SOD.executeFunc("CommonScript.js", "mapMapping", function ()
            {
                var mapMappingobj = new mapMapping();
                mapMappingobj.initialize("#map-canvas", "#imgLoading");
       mapMappingobj.DrawMap();
       mapMappingobj.geocodeQuery("New York, NY");
            });
        })
    });

    Common Script - 

    function mapMapping()
    {
     this.mapDiv;
     this.mapObj;
     this.imgLoading;
     this.searchManager;
     this.APIKey = "API-KEY";
     
     this.initialize = function(mapCanvas, imgLoading)
     {
      this.mapDiv = mapCanvas;
            this.imgLoading = imgLoading;
     }
     
     this.DrawMap = function()
     {
       this.mapObj = new Microsoft.Maps.Map(this.mapDiv,{credentials:this.APIKey});
     }
     
     this.geocodeQuery = function(query)
        {
         var locationQ = query;
            if (!this.searchManager)
            {
             Microsoft.Maps.loadModule('Microsoft.Maps.Search', function ()
             {
           this.searchManager = new Microsoft.Maps.Search.SearchManager(this.mapObj);
        this.geocodeQuery(locationQ);
       });
      }
      else
      {
             alert("search manager query");
                var searchRequest =
                {
        where: locationQ,
        callback: function (r)
        {
         if (r && r.results && r.results.length > 0)
         {
          var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
          this.mapObj.entities.push(pin);
          this.mapObj.setView({ bounds: r.results[0].bestView });
          $(this.imgLoading).hide();
         }
        },
        errorCallback: function (e)
        {
         alert("No results found.");
        }
                };
                this.searchManager.geocode(searchRequest);
            }
        }
     
    }
    SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("CommonScript.js");


    Thanks, Ashish | Please mark a post helpful/answer if it is helpful or answer your query.

    Sunday, October 8, 2017 1:44 PM
  • A couple possible issues. The first is the "this" in the module load callback, may not be the same "this" that was outside of it. Try using var self = this; out side of the map load function and then inside, replace "this" with "self".

    Also try adding a breakpoint inside the module load callback. If your code never gets there, verify that your code actually does try to load the module, if it does, then it is possible that your environment is preventing the module functionality from loading the search module. This happens in certain environments as it won't allow dynamically loaded scripts to then load dynamic scripts for security reasons.


    [Blog] [twitter] [LinkedIn]

    Monday, October 9, 2017 5:54 PM