none
Uncaught ReferenceError: currInfobox is not defined

    Question

  • Hi,

    I copied-paste the html map that msdn provided (except that I changed the credetials key) and when I click on a pin, this error appears :Uncaught ReferenceError: currInfobox is not defined

    Here's the html code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
      <title>Load map with navigation bar module</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null;
      var searchManager = null;
      function getMap()
      {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
      }
      function createSearchManager() 
      {
          map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map)); 
          searchManager = map.getComponent('searchManager'); 
      }
      function LoadSearchModule()
      {
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest })
      }
      function searchRequest() 
      { 
        createSearchManager(); 
        var what = 'pizza'; 
        var userData = { name: 'Maps Test User', id: 'XYZ' }; 
        var where = 'boston, ma'; 
        var request = 
            { 
                what: what, 
                where: where, 
                count: 10, 
                startIndex: 0, 
                bounds: map.getBounds(), 
                callback: search_onSearchSuccess, 
                errorCallback: search_onSearchFailure, 
                userData: userData 
            }; 
        searchManager.search(request); 
      } 
      function search_onSearchSuccess(result, userData) 
      { 
        map.entities.clear(); 
        var searchResults = result && result.searchResults; 
        if (searchResults) { 
            for (var i = 0; i < searchResults.length; i++) { 
                search_createMapPin(searchResults[i]); 
            } 
            if (result.searchRegion && result.searchRegion.mapBounds) { 
                map.setView({ bounds: result.searchRegion.mapBounds.locationRect }); 
            } 
            else 
            { 
                alert('No results returned, Please try after sometime.'); 
            } 
        } 
      } 
      function search_createMapPin(result) 
      { 
        if (result) { 
            var pin = new Microsoft.Maps.Pushpin(result.location, null); 
            Microsoft.Maps.Events.addHandler(pin, 'click', function () { search_showInfoBox(result) }); 
            map.entities.push(pin); 
        } 
      } 
      function search_showInfoBox(result) 
      { 
        if (currInfobox) { 
            currInfobox.setOptions({ visible: true }); 
            map.entities.remove(currInfobox); 
        } 
        currInfobox = new Microsoft.Maps.Infobox( 
            result.location, 
            { 
                title: result.name, 
                description: [result.address, result.city, result.state, result.country, result.phone].join(' '), 
                showPointer: true, 
                titleAction: null, 
                titleClickHandler: null 
            }); 
        currInfobox.setOptions({ visible: true }); 
        map.entities.push(currInfobox); 
      } 
      function search_onSearchFailure(result, userData) 
      { 
        alert('Search failed'); 
      } 
      </script>
      </head>
      <body onload="getMap();">
        <div id='myMap' style=" width:400px; height:400px;"></div>
        <div>
            <input type="button" value="Find Business" onclick="LoadSearchModule();" />
        </div>
      </body>
    </html>
    

    Anyone else has this problem?

    Friday, August 24, 2012 10:17 PM

Answers

  • You can fix it by declaring the infobox globally.

    Here this code would be working:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
      <title>Load map with navigation bar module</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null;
      var searchManager = null;
      var currInfobox = null;
      function getMap()
      {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key', width:400, height:400});
      }
      function createSearchManager() 
      {
          map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map)); 
          searchManager = map.getComponent('searchManager'); 
      }
      function LoadSearchModule()
      {
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest })
      }
      function searchRequest() 
      { 
        createSearchManager(); 
        var what = 'pizza'; 
        var userData = { name: 'Maps Test User', id: 'XYZ' }; 
        var where = 'boston, ma'; 
        var request = 
            { 
                what: what, 
                where: where, 
                count: 10, 
                startIndex: 0, 
                bounds: map.getBounds(), 
                callback: search_onSearchSuccess, 
                errorCallback: search_onSearchFailure, 
                userData: userData 
            }; 
        searchManager.search(request); 
      } 
      function search_onSearchSuccess(result, userData) 
      { 
        map.entities.clear(); 
        var searchResults = result && result.searchResults; 
        if (searchResults) { 
            for (var i = 0; i < searchResults.length; i++) { 
                search_createMapPin(searchResults[i]); 
            } 
            if (result.searchRegion && result.searchRegion.mapBounds) { 
                map.setView({ bounds: result.searchRegion.mapBounds.locationRect }); 
            } 
            else 
            { 
                alert('No results returned, Please try after sometime.'); 
            } 
        } 
      } 
      function search_createMapPin(result) 
      { 
        if (result) { 
            var pin = new Microsoft.Maps.Pushpin(result.location, null); 
            Microsoft.Maps.Events.addHandler(pin, 'click', function () { search_showInfoBox(result) }); 
            map.entities.push(pin); 
        } 
      } 
      function search_showInfoBox(result) 
      { 
        if (currInfobox) { 
            currInfobox.setOptions({ visible: true }); 
            map.entities.remove(currInfobox); 
        } 
        currInfobox = new Microsoft.Maps.Infobox( 
            result.location, 
            { 
                title: result.name, 
                description: [result.address, result.city, result.state, result.country, result.phone].join(' '), 
                showPointer: true, 
                titleAction: null, 
                titleClickHandler: null 
            }); 
        currInfobox.setOptions({ visible: true }); 
        map.entities.push(currInfobox); 
      } 
      function search_onSearchFailure(result, userData) 
      { 
        alert('Search failed'); 
      } 
      </script>
      </head>
      <body onload="getMap();">
        <div id='myMap' style=" width:400px; height:400px;"></div>
        <div>
            <input type="button" value="Find Business" onclick="LoadSearchModule();" />
        </div>
      </body>
    </html>


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Tuesday, August 28, 2012 12:57 PM
    Moderator
  • Nevermind, I had to add a try/catch surrounded...
    Saturday, August 25, 2012 3:41 AM

All replies

  • Nevermind, I had to add a try/catch surrounded...
    Saturday, August 25, 2012 3:41 AM
  • Adding a try catch only suppresses the message...

    Did you ever get the currInfobox to display (popup)?

    Monday, August 27, 2012 2:57 PM
  • You can fix it by declaring the infobox globally.

    Here this code would be working:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
      <title>Load map with navigation bar module</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null;
      var searchManager = null;
      var currInfobox = null;
      function getMap()
      {
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key', width:400, height:400});
      }
      function createSearchManager() 
      {
          map.addComponent('searchManager', new Microsoft.Maps.Search.SearchManager(map)); 
          searchManager = map.getComponent('searchManager'); 
      }
      function LoadSearchModule()
      {
        Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: searchRequest })
      }
      function searchRequest() 
      { 
        createSearchManager(); 
        var what = 'pizza'; 
        var userData = { name: 'Maps Test User', id: 'XYZ' }; 
        var where = 'boston, ma'; 
        var request = 
            { 
                what: what, 
                where: where, 
                count: 10, 
                startIndex: 0, 
                bounds: map.getBounds(), 
                callback: search_onSearchSuccess, 
                errorCallback: search_onSearchFailure, 
                userData: userData 
            }; 
        searchManager.search(request); 
      } 
      function search_onSearchSuccess(result, userData) 
      { 
        map.entities.clear(); 
        var searchResults = result && result.searchResults; 
        if (searchResults) { 
            for (var i = 0; i < searchResults.length; i++) { 
                search_createMapPin(searchResults[i]); 
            } 
            if (result.searchRegion && result.searchRegion.mapBounds) { 
                map.setView({ bounds: result.searchRegion.mapBounds.locationRect }); 
            } 
            else 
            { 
                alert('No results returned, Please try after sometime.'); 
            } 
        } 
      } 
      function search_createMapPin(result) 
      { 
        if (result) { 
            var pin = new Microsoft.Maps.Pushpin(result.location, null); 
            Microsoft.Maps.Events.addHandler(pin, 'click', function () { search_showInfoBox(result) }); 
            map.entities.push(pin); 
        } 
      } 
      function search_showInfoBox(result) 
      { 
        if (currInfobox) { 
            currInfobox.setOptions({ visible: true }); 
            map.entities.remove(currInfobox); 
        } 
        currInfobox = new Microsoft.Maps.Infobox( 
            result.location, 
            { 
                title: result.name, 
                description: [result.address, result.city, result.state, result.country, result.phone].join(' '), 
                showPointer: true, 
                titleAction: null, 
                titleClickHandler: null 
            }); 
        currInfobox.setOptions({ visible: true }); 
        map.entities.push(currInfobox); 
      } 
      function search_onSearchFailure(result, userData) 
      { 
        alert('Search failed'); 
      } 
      </script>
      </head>
      <body onload="getMap();">
        <div id='myMap' style=" width:400px; height:400px;"></div>
        <div>
            <input type="button" value="Find Business" onclick="LoadSearchModule();" />
        </div>
      </body>
    </html>


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/

    Tuesday, August 28, 2012 12:57 PM
    Moderator