virtual earth - Only map is not rendering

Question

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.

Can you sort out, that is related to your graphics card (hardware) on your machine? — Marcel, Sep 02 '14 at 14:14
@Marcel: I believe that this is not a hardware issue because the issue is on the other machine as well. And the same implementation works fine in my other project(s) — Shubham Bhave, Sep 02 '14 at 14:19

score 1 · Answer 1 · answered Sep 02 '14 at 16:31

1

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.

answered Sep 02 '14 at 16:31

rbrundritt

16,570
2
21
46

Thanks for your answer. I am bound to use 6.2 only. I have added the 'map.SetCredentials('YOUR_BING_MAPS_KEY');' along with my valid key. but still the result is same. Regarding CSS, I already have added the css for the div. But the issue is still there – Shubham Bhave Sep 03 '14 at 05:18
1

Ok. 6.2 doesn't exist. It was removed from the servers several years ago and now redirects to 6.3. Have you tried testing a simple app that just loads the map? If you still see the issue try clearing your cache. Also, try watching the network traffic and see if the images are being requested and are loading. It's possible something in your network is blocking access to the tiles. Also, find out where your pushpins are pointing to. Something as simple as a minus sign could be placing your pins in the ocean and thus the dark background. – rbrundritt Sep 03 '14 at 09:30
Ok, now I found out that the map is being displayed on safari browser. (With the same configuration above). And the issue is not in pushpins. because, even if the pin is pointing somewhere in he ocean, I could zoom out to see the map. So, I accept your assumtion that something is blocking the tiles. But except in safari.. – Shubham Bhave Sep 04 '14 at 04:56
1

A couple other things to check. Have you added a metatag for UTF-8. Also try using the Doctype that is documented here: http://msdn.microsoft.com/en-us/library/gg427624.aspx If this is hosted online somewhere where I could get access to it I'd be happy to try and debug it for you. Might be faster. If you want you can email me the info at ricky_brundritt at Hotmail.com – rbrundritt Sep 04 '14 at 11:17
Yes I have added the meta tag and doctype.. That is not the issue. After a huge reserach I found that the issue was with the css. mapcontrol.css inside http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css have a class for the map container- `.MSVE_Map` which have the attribute `position:absolute` Which I have overridden to `position:relative` which actually solved the issue.. Strange.. ;) – Shubham Bhave Sep 05 '14 at 04:13

score 1 · Accepted Answer · answered Sep 05 '14 at 04:20

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..

virtual earth - Only map is not rendering

2 Answers2