none
Bing Map Control V8 included on sharepoint 2013 web part page does not load using Chrome. RRS feed

  • Question

  • I have to show a map (using bing maps) in a web part page. I am including it using a content editor web part. Using Bing Map control V7, it works fine in Chrome and in IE11. When I change it for V8 version, it does not load when we use Chrome. It works fine using IE11.

    Any idea?

    Thanks

    This is the script

    (Using debug in Chrome, it shows an error saying "Microsoft is not defined")

    <div id='mapDiv' style="; width:480px; height:720px;"></div>
    <div id='storeInfo'></div>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release'></script>
    <script type="text/javascript">

        // Script variables to refer to the Excel Web Access Web Part,
        // the Bing map, and a multi-dimensional array of 
        // Store information. 

        var map;

        // Set the page event handlers for onload and unload.
        if (window.attachEvent) {
            window.attachEvent("onload", Page_Load);
        }
        else {
            // For some browsers window.attachEvent does not exist.
            window.addEventListener("DOMContentLoaded", Page_Load, false);
        }

        // Page load event handler
        function Page_Load() {
            GetMap();
        }

        
    // Setup the initial Bing Map view.
    function GetMap()
    {   
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
               {credentials: "Your Bing Maps Key",
                center: new Microsoft.Maps.Location(-37.646485121449786,-64.6701139530266),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 4});
        Microsoft.Maps.Events.addHandler(map, "mousemove", function (e) 
        {
            var mapElem = map.getRootElement();
            if (e.targetType === "map") 
            {
              mapElem.style.cursor = "default";
            } else {
              mapElem.style.cursor = "pointer";
            }
        });
    }
    </script>


    • Edited by Ricky_Brundritt Wednesday, March 15, 2017 3:46 PM removed bing maps key
    Tuesday, March 14, 2017 7:15 PM

Answers

  • Are you seeing any errors? I suspect your code for loading the map is firing before the map control script is loaded. I recommend loading the V8 map control asynchronously. Here is a modified version of your code:

    <div id='mapDiv' style="; width:480px; height:720px;"></div>
    <div id='storeInfo'></div>
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    <script type="text/javascript">
    
            var map;
        
    // Setup the initial Bing Map view.
    function GetMap()
    {   
        map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), 
               {credentials: "Your Bing Maps Key",
                center: new Microsoft.Maps.Location(-37.646485121449786,-64.6701139530266),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 4});
        Microsoft.Maps.Events.addHandler(map, "mousemove", function (e) 
        {
            var mapElem = map.getRootElement();
            if (e.targetType === "map") 
            {
              mapElem.style.cursor = "default";
            } else {
              mapElem.style.cursor = "pointer";
            }
        });
    }
    </script> 


    [Blog] [twitter] [LinkedIn]

    Wednesday, March 15, 2017 3:38 PM