locked
v8 Map not centred when printing RRS feed

  • Question

  • I am currently migrating from v7 to v8 of Bing Maps and have got everything working except for one niggle. I use media print queries in css to change the map div so that it fits nicely onto a printed page. When printing in v7 the map was clipped equally from all sides and consequently stayed in the centre of the div, which is what I imagine an end user would expect, but in v8 the map is clipped from the top left of the div, meaning that whatever was centred on the screen is not in the middle of the page.

    This is the code from v7...

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
    	<script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=en-GB&s=1"></script>
    	<script type='text/javascript'>
    		function LoadMap() {
    			map = new Microsoft.Maps.Map(document.getElementById('myMap'),
    			{   credentials: "MyBingMapsKey",
    				center: new Microsoft.Maps.Location(54.8, -2.8),
    				zoom: 11
    			});
    			map.entities.push(new Microsoft.Maps.Pushpin(map.getCenter()));
    		}
    	</script>
    	<style>body {margin:0}</style>
    </head>
    <body onload="LoadMap()">
    	<div id="myMap" style="width:100vw;height:100vh"></div>
    </body>
    </html>

    ...and this is the corresponding code from v8. If you go to Print Preview you'll see that the pushpin stays in the centre of the printed page for v7, but isn't shown on the v8 page due to the clipping. I've dropped the media print queries from both code samples but the effect remains when printing

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
    	<script type="text/javascript" charset="utf-8" src="http://www.bing.com/api/maps/mapcontrol?callback=GetMap&branch=experimental" async defer></script>
    	<script type='text/javascript'>
    		var map;
    		function GetMap() {
    			var map = new Microsoft.Maps.Map('#myMap',
    			{ 	credentials: "MyBingMapsKey",
    				center: new Microsoft.Maps.Location(54.8, -2.8),
    				zoom: 11
    			});
    			map.entities.push(new Microsoft.Maps.Pushpin(map.getCenter()));
    		}
        </script>
    	<style>body {margin:0}</style>
    </head>
    <body>
    	<div id="myMap" style="width:100vw;height:100vh"></div>
    </body>
    </html>
    Any suggestions on what to do would be much appreciated.

    Tuesday, August 29, 2017 12:03 PM

Answers