none
Bing Maps 8 in Bootstrap Modal RRS feed

  • Question

  • Hi,

    Just migrating a page over to v8 API.

    I have a table list of records, when a user clicks a row, a function is fired to retrieve the full information for that record, update a modal (which already exists - but is hidden), then reveal the modal.

    The modal contains a Bing map.

    This all worked fine with v7 - but with v8 i get the following error on page load (during the map being initialised):

    Uncaught TypeError: Cannot read property 'clientWidth' of undefined


    The modal has a div holder:

    <div id="map-holder">
        <div id="map-canvas-overview"></div>
    </div>

    CSS:

      <style>
      #map-holder {
        ;
        width:100%;
        height:350px;
        /*margin-bottom:10px;*/
      }
      #map-canvas-overview {
        ;
        height: 350px;
        width: 100%;
        /*margin: 1px solid #999;*/
        margin-top: 10px;
        margin-bottom: 0px;
        padding: 0px;
        border: 1px solid #999;
        background-color: #333;
      }
      </style>

    And the loadmap function:

    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadmapOverview' async defer></script>
    <!-- <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release' async defer></script> -->
    <script>
        //Create map and add overlays.
        var map_overview = null;
    
        function loadmapOverview()
        {
          //Create bounding rectangle for map bounds. Use geom object extents - or use all wales. fromString("north,west,south,east")
          var LocationRect = Microsoft.Maps.LocationRect.fromString("53.623270997205,-5.7338819902281,51.308090994967,-2.0589549885741");
    
          map_overview = new Microsoft.Maps.Map(document.getElementById('map-canvas-overview'), {
              credentials: 'myKey',
              bounds:LocationRect,
              mapTypeId: Microsoft.Maps.MapTypeId.ordnanceSurvey
          });
    
          // //Add data layer - for sites polygons.
          map_overview_polygons = new Microsoft.Maps.Layer();
          map_overview.layers.insert(map_overview_polygons);
    
          //Load the Well Known Text module and the drawing tools modules.
          Microsoft.Maps.loadModule(['Microsoft.Maps.WellKnownText','Microsoft.Maps.SpatialMath'], function () {
            // addBuffers(map_overview, map_overview_polygons);
          });
        }
    </script>

    Any ideas?

    Thanks

    Steve


    Steve Goddard - Biodiversity Information Service



    Thursday, February 23, 2017 12:32 PM

Answers

  • Try adding a break point in your loadMapOverview and then check if document.getElementById('map-canvas-overview') is defined or not. If it isn't , the issue is that the map script is loading faster than your page is. One solution would be to move the map script tag to the bottom of your page so that it triggers the map load after the body of the page has loaded. If that isn't the issue, try an find which line of code is throwing the error.

    [Blog] [twitter] [LinkedIn]

    Thursday, February 23, 2017 4:54 PM
  • Thanks Ricky - all fixed. I'm honestly not sure where the issue was which is frustrating. But i started with a clean page and checked the map in a modal worked - which it did. I then built the code back up. I think it was another modal interfering - but i'm really not sure how.

    Thanks again,

    Steve


    Steve Goddard - Biodiversity Information Service

    Tuesday, February 28, 2017 11:32 AM

All replies

  • Try adding a break point in your loadMapOverview and then check if document.getElementById('map-canvas-overview') is defined or not. If it isn't , the issue is that the map script is loading faster than your page is. One solution would be to move the map script tag to the bottom of your page so that it triggers the map load after the body of the page has loaded. If that isn't the issue, try an find which line of code is throwing the error.

    [Blog] [twitter] [LinkedIn]

    Thursday, February 23, 2017 4:54 PM
  • Thanks Ricky - all fixed. I'm honestly not sure where the issue was which is frustrating. But i started with a clean page and checked the map in a modal worked - which it did. I then built the code back up. I think it was another modal interfering - but i'm really not sure how.

    Thanks again,

    Steve


    Steve Goddard - Biodiversity Information Service

    Tuesday, February 28, 2017 11:32 AM
  • Hi Ricky_Brundritt

    Just to confirm, your suggestion did work!

    Had the Same problem. Saw the map div was still undefined on load. Was fixed by moving the map script tag to the bottom of the page.

    Thanks!
    Monday, March 20, 2017 7:38 AM