none
Bing Maps API Object undefined when used in an Excel App RRS feed

  • Question

  • Hi,

    I'm having problems adding the Bing Maps control to my office app. 

    When accessing the bing maps api  I get:

    Unhandled exception at line 37, column 5 in https://localhost:44302/App/Home/Home.js

    0x800a138f - JavaScript runtime error: Unable to get property 'Map' of undefined or null reference

    The code is super easy but as I'm new to office apps and javascript I can't find out whats going wrong.

    It seems like the bing maps api is not loaded correctly - it works in a standalone version when you open the home.html file in a browser (strange isn't it?). This must be a problem with the excel app environment.

    This is my Home.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <title>Bing Maps Test</title>
        <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
     
        <link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
        <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
        
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
     
        <link href="../App.css" rel="stylesheet" type="text/css" />
        <script src="../App.js" type="text/javascript"></script>
     
        <link href="Home.css" rel="stylesheet" type="text/css" />
        <script src="Home.js" type="text/javascript"></script>
    </head>
    <body>    
        <div id="mapArea" style="position: relative; margin: 10px; width:500px; height: 500px">
            <div id="map">&nbsp;</div>
        </div>
    </body>
    </html>

    And here is the the Home.js:

    /// <reference path="../App.js" />
    
    (function () {
        "use strict";
    
        // The initialize function must be run each time a new page is loaded
        Office.initialize = function (reason) {
            $(document).ready(function () {
                app.initialize();
    
                createMap();
            });
        };
    
    })();
    
    // Uncomment for test in browser
    //$(document).ready(function() {
    //    createMap();
    //})
    
    function createMap() {
        map = new Microsoft.Maps.Map(document.getElementById("map"),
        {
    
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 11,
            showMapTypeSelector: true,
            enableSearchLogo: false
        });
    
        //set center
        map.setView({ center: new Microsoft.Maps.Location(48.150971, 11.538815) });
    }

    The problem happens in the first line of the createMap() function. When the exception occurs I can see that "Maps" is undefined.

    Any help is greatly appreciated as I am fighting with this since hours/days now -_-

    Regards


    Tuesday, July 1, 2014 8:06 AM

Answers

  • Finally I got it - after an endless time of searching.

    By coincidence I deactivated the SSL setting in the properties window of the project and bam it was working. 

    When working with ssl you have to use:

    "https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"

    Note the s=1 switch at the end (enables ssl).


    • Marked as answer by ___Stefan___ Wednesday, July 2, 2014 7:36 AM
    • Edited by ___Stefan___ Tuesday, September 23, 2014 7:10 AM
    Wednesday, July 2, 2014 7:36 AM

All replies

  • Also interesting: "Microsoft" seems to be valid but does of course not contain a definition for Maps, instead it contains definitions for Office.

    Tuesday, July 1, 2014 8:53 AM
  • Finally I got it - after an endless time of searching.

    By coincidence I deactivated the SSL setting in the properties window of the project and bam it was working. 

    When working with ssl you have to use:

    "https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"

    Note the s=1 switch at the end (enables ssl).


    • Marked as answer by ___Stefan___ Wednesday, July 2, 2014 7:36 AM
    • Edited by ___Stefan___ Tuesday, September 23, 2014 7:10 AM
    Wednesday, July 2, 2014 7:36 AM