Search code examples
javascriptjquerycssdomvirtual-earth

Virtual Earth maps don't show when starting as display:none

I have this code to show a map using the Virtual Earth API:

<script type="text/javascript">
    function GetMap() {
        var map = map = new VEMap('myMap');
        map.LoadMap(new VELatLong(47.6, -122.33), 10, 'h', false);
    }

    $(document).ready(function () {
        GetMap();
    });
</script>

<a href="#" onclick="$('#myMap').toggle();">Show Map</a>
<div id="myMap" style="position:relative; width:400px; height:400px; display:none;"></div>

This doesn't work and displays a black box where the map should go. If I remove the display: none; style then it works just fine. But I don't want the map to be visible when the page loads, I want the user to toggle it. Can anyone see anything wrong with my approach?

Solution

  • Maybe the map needs to be on display when it initializes. It happens especially if the map has to measure the dimensions of the container in order to render properly.

    Either go as Diodes suggested moving the map off visual area (you could also set visibility to false) or initialize the map when you actually have to show it.