none
Problems hiding/unhiding bing maps with Bing Maps AJAX Control RRS feed

  • Question

  • Hi All,

    I'm new to the Bing Maps AJAX Control API and I've been tinkering with the Bing Maps API for one of my web applications that needs to be able to show and hide the element (DIV) containing the bing map, but loading or changing the map in a hidden DIV causes it to act strangely.

    I figured this strange behaviour had something to do with the fact that certain properties of the containing element may be inaccessible while the CSS display property of the DIV is set to 'none' and I did find an old forum post which talks about the need to "resize" or "update" a map for it to function properly once it is displayed/visible again.

    The post deals with an older version of the Maps API, so I'm not sure if the same or similar solution is available with the latest version of the Maps API.

    I've been experimenting with the most current Online SDK, but I haven't found a similar function to the VEMap.Resize function suggested in the old post.

    Has anyone seen this before and does anyone know how to get around the problem?

    Thanks for any help in advance.


    • Edited by Darin Morris Thursday, October 11, 2012 10:36 AM spelling
    Thursday, October 11, 2012 10:35 AM

Answers

  • We do this often with our maps and struggled for a long time to get it working.  Here's the approach that we use now, compatible with IE 8/9, FF, Chrome, and Safari (not sure of others):

    Use the following markup:

    <div class="map-container">
        <div class="map"></div>
    </div>  

    And the following styles:

    .map-container {
        height: 300px;
        width: 100%;
    }

    .map-container .map 
    {
        height: 100%;
    }

    The important elements of the above are that the map-container has a fixed height in px, , and that the inner map div has a height of 100%.

    Whenever you show the map from a hidden state, after the show do the following:

    map.setOptions({ width: $mapDiv.width(), height: $mapDiv.height() });

    where $mapDiv is the div element that you used when initializing the map, as in $(".map") from the above example.

    That will work.  We've tested this with showing, hiding, and resizing.

    Hope that helps,

    Scott


    Thursday, October 11, 2012 6:14 PM

All replies

  • try using the setOptions method of the map to set the width and height of the map after it is displayed. This should get the control working properly again.


    http://rbrundritt.wordpress.com

    Thursday, October 11, 2012 12:08 PM
  • We do this often with our maps and struggled for a long time to get it working.  Here's the approach that we use now, compatible with IE 8/9, FF, Chrome, and Safari (not sure of others):

    Use the following markup:

    <div class="map-container">
        <div class="map"></div>
    </div>  

    And the following styles:

    .map-container {
        height: 300px;
        width: 100%;
    }

    .map-container .map 
    {
        height: 100%;
    }

    The important elements of the above are that the map-container has a fixed height in px, , and that the inner map div has a height of 100%.

    Whenever you show the map from a hidden state, after the show do the following:

    map.setOptions({ width: $mapDiv.width(), height: $mapDiv.height() });

    where $mapDiv is the div element that you used when initializing the map, as in $(".map") from the above example.

    That will work.  We've tested this with showing, hiding, and resizing.

    Hope that helps,

    Scott


    Thursday, October 11, 2012 6:14 PM
  • Hi Guys,

    You are champions!  Scott's fix did the trick!  Many thanks!

    Friday, October 12, 2012 12:05 PM