CODEWITHSUNDEEP
asp.net-mvc-4bing-maps
J86
J86

Reputation: 15237

Bing Maps not showing on Localhost MVC application

I am building a sample MVC4 web application, my aim is to learn and master working with the Bing Maps API, but I'm afraid it is not going well.

I am following this tutorial, but when I reload my page, I do not get a map, where the map is suppose to show, I just see blank background colour ! even after getting the API Key, and putting it into the script on my page ! No map is showing !

Here is my script code:

<script type="text/javascript">
var map = null;

function getMap()
{
    var boundingBox = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'MyKeyGoesHere', bounds: boundingBox });
}
</script>

Upvotes: 0

Views: 1860

Answers (1)

Nicolas Boonaert
Nicolas Boonaert

Reputation: 2952

There are several things to consider in your implementation.

  1. Add the script reference to the Bing Maps API
  2. Add the HTML element and required information in your web page
  3. Add the load event and fire your getMap() method (using an onload event set on the body or dynamicaly by code)

See the MSDN to help you in your first implementation: http://msdn.microsoft.com/en-us/library/gg427624.aspx

Here is a sample static page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    </script>
    <script type="text/javascript">
        var map = null;

        function getMap() {
            var boundingBox = Microsoft.Maps.LocationRect.fromLocations(
                new Microsoft.Maps.Location(47.618594, -122.347618), 
                new Microsoft.Maps.Location(47.620700, -122.347584), 
                new Microsoft.Maps.Location(47.622052, -122.345869));

            map = new Microsoft.Maps.Map(
                document.getElementById('myMap'), 
                { 
                    credentials: 'YOURKEY', 
                    bounds: boundingBox 
                });
        }

    </script>
</head>
<body onload="getMap();">
    <div id="myMap" style="position: relative; width: 800px; height: 600px;">
    </div>
</body>
</html>

Upvotes: 1

Related Questions