CODEWITHSUNDEEP
jsonbing-maps
AK47
AK47

Reputation: 3797

How to create Map using Bing Map Control

Want to create a performance map using Bing Map.

I have this code available with me,

for creating map,

var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "myapikey" });

Data for generating points on map,

{"GetSitePerformanceByDateCountryResult":[{"AVG_UserLat":8.4827804565429688,"AVG_UserLon":76.929702758789062,"Performance":196},{"AVG_UserLat":9.44175550651162,"AVG_UserLon":76.494306583754138,"Performance":96}]}

I don't know what to do ahead, pls help guys.

Upvotes: 0

Views: 448

Answers (1)

rbrundritt
rbrundritt

Reputation: 17954

This is fairly easy to do. Before I provide the code here are some useful resources to get you started with Bing Maps development:

http://msdn.microsoft.com/en-us/library/gg427610.aspx

http://www.bingmapsportal.com/ISDK/AjaxV7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

  <script type="text/javascript">
    var map;
    var data = {"GetSitePerformanceByDateCountryResult":[{"AVG_UserLat":8.4827804565429688,"AVG_UserLon":76.929702758789062,"Performance":196},{"AVG_UserLat":9.44175550651162,"AVG_UserLon":76.494306583754138,"Performance":96}]};

    function GetMap()
    {
        map = new Microsoft.Maps.Map(document.getElementById("myMap"), { 
            credentials: "YOUR_BING_MAPS_KEY"
        });

        LoadData();
    }

    function LoadData(){
        var result = data.GetSitePerformanceByDateCountryResult;
        var locs = [];

        for(var i=0;i<result.length;i++){
            var loc = new Microsoft.Maps.Location(result[i].AVG_UserLat, result[i].AVG_UserLon);
            locs.push(loc);

            var pin = new Microsoft.Maps.Pushpin(loc, { text : result[i].Performance + '' }); 
            map.entities.push(pin);
        }

        map.setView({bounds : Microsoft.Maps.LocationRect.fromLocations(locs), padding: 80 });
    }
    </script>
</head>
<body onload="GetMap();">
    <div id='myMap' style='position:relative;width:800px;height:600px;'></div>
</body>
</html>

Upvotes: 1

Related Questions