CODEWITHSUNDEEP
javascriptasp.net-mvctypescriptbing-maps
Sneha Deore
Sneha Deore

Reputation: 11

Bing map is not showing location using asp.net mvc

When I implemented the Bing map to view it was working fine when I moved the same code to Popup(modal) window its showing like below: Bing map is not showing location

I am using:

<script charset="UTF-8" type="text/javascript" 
                src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">
</script>
<div id="myMap" 
         style="position: relative!important;width:400px;height:400px;" 
         class="span9">
</div>

and: 

$m(document).ready(function () {
    var map = null;
    var myMap = document.getElementById("myMap");
    myMap.style.display = '';
    map = new VEMap('myMap');
    map.SetDashboardSize(VEDashboardSize.Large);
    map.LoadMap(new VELatLong(43.79488907226601, -121.014), 10);//, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);//oint, zoom, style, fixed, mode, showSwitch, tileBuffer
    //Add pushpin
    var pin = new VEShape(VEShapeType.Pushpin, new VELatLong(43.79488907226601, -121.014));
    pin.SetCustomIcon(null);
    pin.SetTitle('Test');
    pin.SetDescription("<br/>" + "<strong>Desp : Latitude:</strong>" + "<br/>" + "<strong>Longitude:</strong>");
    map.AddShape(pin);
    map.ShowDashboard();

});

Please let me know what is going wrong when I moved code to pop-up

Upvotes: 0

Views: 476

Answers (1)

juFo
juFo

Reputation: 18587

In case anyone is interested...

I recently had a similar problem. I moved code from Bing Maps v7 to Bing Maps v8 and converting javascript code from Bing Maps v7 to Bing Maps v8 TypeScript.

For version 7, my Bing Map was visible in a bootstrap modal using this code in the modal-body:

<div id="mapDivGeocode" style="height:250px;position:relative;"></div>

something like:

...
<div class="modal-body">
  <form id="...">
    <div id="mapDivGeocode" style="height:250px;position:relative;"></div>
  </form>
</div>
...

This worked perfectly in Bing Maps v7, not with Bing Maps v8 this didn't work anymore.

For some reason it is resetting or ignoring my height: 250px. A solution was to wrapper another div around it, like this:

<div style="height: 250px;">
      <div id="mapDivGeocode" style="position:relative; height:250px;"></div>
</div>

so the code in the bootstrap modal with Bing Maps v8 looks like this now:

...
<div class="modal-body">
  <form id="...">
     <div style="height: 250px;">
        <div id="mapDivGeocode" style="position:relative; height:250px;"></div>
     </div>
  </form>
</div>
...

Extra additional info: if your view is not visible and thus not set up correctly in Bing Maps v8, your geocoding will fail with a message like this:

"errorDetails":["One or more parameters are not valid.","userMapView: This parameter value is out of range."],"resourceSets":[],"statusCode":400,"statusDescription":"Bad Request"

Note that this information was not visible in the errorCallback of the Microsoft.Maps.Search.IGeocodeRequestOptions, I had to use F12 developer tools from Microsoft Edge and go to [Network] tab, select the request made to bing maps and select [Body] > [Response body] on the right side of the developer tools. There you will see that errorDetails :-) (and not in the errorCallback it seems...)

Once the map was correctly visible in my modal, my geocode didn't call the errorCallback anymore and the callback with Microsoft.Maps.Search.IGeocodeResult started to work again!

Upvotes: 1

Related Questions