none
Polyline Problem in IE7 RRS feed

  • Question

  • Hi,

    I hava a Problem adding Polylines to a Map on IE7. It looks like Polyline is not related to the Map, if you zoom out, it moves on the map... I think it's related to the div i have around the map, without the CSS part it works fine, but even with the CSS part it works fine in IE8,9 FF and so on... May someone give it a try? Push "Linie hinzufügen" and click on the Map, and the example Polyline will appear. Zoom out to see what happens (in IE7).

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>   
    <head>      
    	<title>Polyline default</title>      
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>      
    	<style type="text/css">
    	<!--
    	#frame 
    	{
    	   text-align: center;
    	}
    	-->
    	</style>
    	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>     
    	<script type="text/javascript">
    		var map = null;                  
    		function getMap()      {        
    			map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'YOUR KEY HERE'});      
    		}            
    		function addDefaultPolyline()      { 
    			latlon = map.getCenter();         
    			var polyline = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(latlon.latitude-0.1, latlon.longitude-0.1), new Microsoft.Maps.Location(latlon.latitude+0.1, latlon.longitude-0.1), new Microsoft.Maps.Location(latlon.latitude+0.1, latlon.longitude), new Microsoft.Maps.Location(latlon.latitude-0.1, latlon.longitude), new Microsoft.Maps.Location(latlon.latitude-0.1, latlon.longitude+0.1), new Microsoft.Maps.Location(latlon.latitude+0.1, latlon.longitude+0.1)], null);         
    			map.setView( {zoom:8});         
    			map.entities.push(polyline);      
    		}      
    	</script>   
    </head>   
    <body onload="getMap();">      
    	<div id="frame">
    		<div id='myMap' style="; width:400px; height:400px;"></div>      
    		<div>         
    		<input type="button" value="AddDefaultPolyline" onclick="addDefaultPolyline();" /> 	     
    		</div>  
    	</div>		
    </body>
    </html>

    Thanks!



    • Edited by Cpt_Hero Wednesday, July 10, 2013 2:32 PM more simple example
    Tuesday, July 9, 2013 3:31 PM

Answers

  • I added a more simple example. Its the 'polyline default' with an added div, called 'frame'. This frame centers the map. IE7 fails on adding polyline...

    Edit:

    I solved this myself \o/. Its the centering via text-align, wich displays the Map in the middle, but don't really moves it. FF showed me a left aligned map... So changing the css to

    <style type="text/css">
    <!--
    #frame 
    {
    	margin-left: auto;
    	margin-right: auto;
    	width: 450px;
    }
    -->
    </style>
    and voila, centered map with working polylines.
    • Edited by Cpt_Hero Wednesday, July 10, 2013 2:56 PM solved
    • Marked as answer by Cpt_Hero Wednesday, July 10, 2013 2:57 PM
    Wednesday, July 10, 2013 2:34 PM