locked
Change Map width in javascript RRS feed

  • Question

  • Is there a way to change the map size in a javascript function?

    The Map Class section says we can change using setOptions(options: MapOptions) but nothing in that section points to changing the width or height of a map.  Any suggestions?

    David

    Saturday, July 16, 2016 10:34 PM

Answers

  • You should just need to change the width/height of the map div. The width/height map options are deprecated in v8 as changing the div dimensions is much more commonly requested as it is more natural in a html app.


    [Blog] [twitter] [LinkedIn]

    • Marked as answer by dcmap2 Monday, July 18, 2016 8:21 PM
    Monday, July 18, 2016 2:56 PM
  • Here is an example of how to resize the map div using standard JavaScript/HTML style properties.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <!-- Reference to the Bing Maps SDK -->
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    
        <script type='text/javascript'>
        var map;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key',
                center: new Microsoft.Maps.Location(51.50632, -0.12714),
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                zoom: 10
            });
        }
    
        function resize() {
            var mapDiv = document.getElementById('myMap');
            mapDiv.style.width = 300 + 'px';
            mapDiv.style.height = 200 + 'px';
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div><br/>
        <input type="button" value="Resize" onclick="resize()"/>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, July 19, 2016 5:17 PM

All replies

  • Looks like you can't change the width and height of a map using javascript.

    I tried using  map.setOptions({ height: 100, width: 100 });

    and a dozen variations-nothing works.  Maybe we have to wait until v9.

    David

    Monday, July 18, 2016 12:49 AM
  • You should just need to change the width/height of the map div. The width/height map options are deprecated in v8 as changing the div dimensions is much more commonly requested as it is more natural in a html app.


    [Blog] [twitter] [LinkedIn]

    • Marked as answer by dcmap2 Monday, July 18, 2016 8:21 PM
    Monday, July 18, 2016 2:56 PM
  • OK, thanks.

    I'm guessing Microsoft will update the SDK manual to reflect that changing width and height using setOptions is no longer available?

    David

    Monday, July 18, 2016 8:22 PM
  • This is already documented as deprecated in the v7 migration guide.

    [Blog] [twitter] [LinkedIn]

    Tuesday, July 19, 2016 3:06 AM
  • Here is an example of how to resize the map div using standard JavaScript/HTML style properties.

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <!-- Reference to the Bing Maps SDK -->
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    
        <script type='text/javascript'>
        var map;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Your Bing Maps Key',
                center: new Microsoft.Maps.Location(51.50632, -0.12714),
                mapTypeId: Microsoft.Maps.MapTypeId.aerial,
                zoom: 10
            });
        }
    
        function resize() {
            var mapDiv = document.getElementById('myMap');
            mapDiv.style.width = 300 + 'px';
            mapDiv.style.height = 200 + 'px';
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div><br/>
        <input type="button" value="Resize" onclick="resize()"/>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Tuesday, July 19, 2016 5:17 PM
  • <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
    
        <!-- Reference to the Bing Maps SDK -->
        <script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
    
        <script type='text/javascript'>
        var map;
    
        function GetMap()
        {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: "",
                center: new Microsoft.Maps.Location(51.50632, -0.12714),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 5
            });
    
            window.Microsoft.Maps.Events.addHandler(map, 'viewchangeend', myviewchangeend);
        }
    
        function resize() {
    
            var mapDiv = document.getElementById('myMap');
            mapDiv.style.width = 300 + 'px';
            mapDiv.style.height = 250 + 'px';
    
            map.setView({ center: new Microsoft.Maps.Location(44, -88) });
        }
    
        function myviewchangeend(e) {
            stats();
        }
    
        function stats() {
            var locRect = map.getBounds();
            var west = locRect.getWest();
            var east = locRect.getEast();
            var north = locRect.getNorth();
            var south = locRect.getSouth();
            var mheight = map.getHeight();
            var mwidth = map.getWidth();
    
            document.getElementById('west').innerHTML = west;
            document.getElementById('east').innerHTML = east;
            document.getElementById('north').innerHTML = north;
            document.getElementById('south').innerHTML = south;
            document.getElementById('mwidth').innerHTML = mwidth;
            document.getElementById('mheight').innerHTML = mheight;
        }
        </script>
    </head>
    <body>
        <div id="myMap" style=";width:600px;height:400px;"></div><br />
        <input type="button" value="Resize" onclick="resize()" />
        <input type="button" value="Stats" onclick="stats()" />
        <div id="west"></div>
        <div id="east"></div>
        <div id="north"></div>
        <div id="south"></div>
        <div id="mwidth"></div>
        <div id="mheight"></div>
    </body>
    </html>
    I made a slight change to your code to highlight an issue we are running into. When we resize the map we also reset the view which causes the viewchanged event to fire. When we get the properties (bounds,height,width) of the map, they are incorrect.  When we hit the stats button in this example then they are correct.  We need the map to give use the correct values in the viewchanged event. Is there another event we should be using?
    Wednesday, November 23, 2016 10:44 PM