Live Connect Developer Center >
> 
> 
Bing Maps not working with JQuery UI Tabs

Locked Bing Maps not working with JQuery UI Tabs

  • Friday, May 13, 2011 8:22 AM
     
      Has Code
    Sign In to Vote
    0

    Hello everyone,

     

    I'm trying to implement Bing Maps in a visual web part in Sharepoint 2010 where I have configured the JQuery UI Tabs control. Earlier I made a basic app with Bing maps that just shows a map with a pin point. Now I just wanted to put that section into a tab and the problem is that when you switch to its tab, its just not visible.

    I have seen a similar known issue with Google maps where they have proposed a solution by modifying the CSS and calling a Google maps checkResize() method
    http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

    I did modify my CSS accordingly but I'm not sure if there is an equivalent function to checkResize() in Bing Maps API.

    Here's the section of the tab in which Bing map is supposed to appear

     <div id="tabs-2">
    <p>
      Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
      pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
      Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
      pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
      enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    
    <div id="myMap" style="position:relative; width:600px; height:400px;">
      
    </div>
  </div>

    while this is the CSS that I changed in jquery.ui.tabs.css file

    .ui-tabs .ui-tabs-hide {/* display: none !important; */
            position: absolute;
  left: -10000px;
             }
    I would greatly appreciate if you can share your thoughts or point out some solutions to this.

    Thanks,
    /AK

       

    All Replies

    • Friday, May 13, 2011 2:16 PM
       
       Answered Has Code
      Sign In to Vote
      0

       Here is a sample that used jQuery UI tabs.

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>Map with valid credentials</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=getMap">
 </script>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
	<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/excite-bike/jquery-ui.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
  var map = null;

  var locs = [];

  function getMap() {
   // Initialize the map
   map = new Microsoft.Maps.Map($('#map').get(0), {
    credentials: "Your Bing Maps Key",
    center: new Microsoft.Maps.Location(47.5, 2.75),
    zoom: 2,
    mapTypeId: Microsoft.Maps.MapTypeId.road
   });
  }
		
		function disposeMap() {
			map.dispose();
		}
		
 </script>
</head>
<body>
	<script>
	$(function() {
		$( "#tabs" ).tabs({
			selected: 0,
			select: function(event, ui) {
				if(ui.index == 1)
					getMap();
				else
					disposeMap();
			}
		});
	});
	</script>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Preloaded</a></li>
			<li><a href="#tabs-map">Map</a></li>
		</ul>
		<div id="tabs-1">
			<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
		</div>
		<div id="tabs-map">
			<div id="map" style="float: left; position: relative; width: 800px; height: 600px;"></div>
		</div>
	</div>
</body>
</html>

       

       

      MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/