CODEWITHSUNDEEP
javascriptcssasp.netbing-mapsvirtual-earth
Shubham B
Shubham B

Reputation: 366

virtual earth - Only map is not rendering

I am facing this strange issue. The bing map does not display on my page where as all the controls even pushpins displays properly.
I googled a lot and same the functionality is working great in my other project(s)

enter image description here

I suspect that something is wrong with the reference to the dev.virtualearth.net, Or I am missing something

Here is my code: ASCX (is inside the content place holder of dynamically generated aspx): 

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=de-de">
</script>

<div>
       .
       .
       .
       <div id="bigMapContainer">
                <div id="eventMap">
                </div>
       </div>

</div>

Code behind:

string script = @"
            function GetVEMap() {
               map = new VEMap('eventMap');
               map.SetDashboardSize(VEDashboardSize.Small);
               map.LoadMap();
               DisplayEventsOnMap();
            }

   function DisplayEventsOnMap() {
                var eventMapLayer = new VEShapeLayer();
                eventMapLayer.Id = 'eventMapLayer';
                var points = null;
                       .
                       .
                       .
                //Code to get the data for pin display etc
                       .
                       .
               map.AddShapeLayer(eventMapLayer);
               map.SetMapView(eventMapLayer.GetBoundingRectangle());
               map.SetZoomLevel(15);

              });
            }

            $(window).load(function() {
                       GetVEMap();
                      }
            );";

     ScriptManager.RegisterStartupScript(this, typeof(Page), "MapDisplay", script, true);

CSS: 

   #bigMapContainer {display: block;}
   #eventMap { position: absolute; width: 550px height: 500px; }

I have added some references on the master pages which are not related to the map but might conflict with my map implementation(?)

<script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.responsivemenu.js"></script>
<script type="text/javascript" src="/js/client.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>

Help is very much appreciated.

Upvotes: 1

Views: 830

Answers (2)

Shubham B
Shubham B

Reputation: 366

After a huge reserach I found that the issue was with the css. Thanks @rbrunditt for help

mapcontrol.css inside http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css/bin/6.3.20091207154938.04/de/mapcontrol.css have a class for the map container- .MSVE_Map which have the attribute position:absolute which was making the tiles display out of the screen.

I have overridden the class to position:relative which actually solved the issue..

Upvotes: 1

rbrundritt
rbrundritt

Reputation: 17954

First off, it looks like you are pointing to Virtual Earth 6.2 which was deprecated several years ago and now points to v6.3. That said v6.3 is really old and is not recommended for new development projects. If this is a new project you should be using Bing Maps V7 which is the latest and greatest version of Bing Maps (Virtual earth was renamed to Bing Maps in 2009). V7 is much faster, has a lot more features, and also a lot smaller.

Assuming that this is an existing project that just started having issues. Looking at your code, one thing I notice right away is that there are no credentials specified when loading the map. This is required. Right before you call the LoadMap method you should have a line of code like this:

map.SetCredentials('YOUR_BING_MAPS_KEY');

If you do not have a Bing Maps key you can get one by creating a Bing Maps account in the Bing Maps portal: http://bingmapsportal.com Here is some documentation on creating a key: http://msdn.microsoft.com/en-us/library/ff428642.aspx

Next, the eventMap div, do you specify any styles for this? It should have a position, width and height specified in as either a CSS class or as an inline style. Without this you will get odd rendering in some browsers.

Upvotes: 1

Related Questions