Bing Maps from C# to Javascript

Question

Bing Maps from C# to Javascript

Anonymous

I want to convert the below code to Javascript from C#

To display Localtime ,Timezone and map.

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type='text/javascript'>
        var map, searchManager;

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Free Bing Api Key',
                center: new Microsoft.Maps.Location(@ViewData["lat"], @ViewData["long"]),
                zoom: 11
            });

            //Make a request to reverse geocode the center of the map.
            reverseGeocode();
        }

        function reverseGeocode() {
            //If search manager is not defined, load the search module.
            if (!searchManager) {
                //Create an instance of the search manager and call the reverseGeocode function again.
                Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                    searchManager = new Microsoft.Maps.Search.SearchManager(map);
                    reverseGeocode();
                });
            } else {
                var searchRequest = {
                    location: map.getCenter(),
                    callback: function (r) {
                        //Tell the user the name of the result.
                        alert(r.name);
                    },
                    errorCallback: function (e) {
                        //If there is an error, alert the user about it.
                        alert("Unable to reverse geocode location.");
                    }
                };

                //Make the reverse geocode request.
                searchManager.reverseGeocode(searchRequest);
            }
        }

         
      
        
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>

string key = "Bing Key";
            string loc = model.Location;
            string query = "1 Microsoft Way,Seattle";
            using (HttpClient client = new HttpClient())
            {

                Uri geocodetime = new Uri(string.Format("https://dev.virtualearth.net/REST/v1/timezone/?q={0}&key={1}", query, key));

                var response1 = client.GetAsync(geocodetime).Result;

                string json1 = await response1.Content.ReadAsStringAsync();

                // Parse the JSON response to extract the address
                dynamic data1 = Newtonsoft.Json.JsonConvert.DeserializeObject(json1);
                string timez = "";

                string  final = "";
                int len;
                string timezone="";

                ViewData["err"] = "";
                try
                {
                    timez = data1.resourceSets[0].resources[0].timeZoneAtLocation[0].timeZone[0].convertedTime.localTime;
                    timezone = data1.resourceSets[0].resources[0].timeZoneAtLocation[0].timeZone[0].convertedTime.timeZoneDisplayName;

                }
                catch (Exception e)
                {
                    loc = "";
                    timez = "";
                    ViewData["err"] = "Invalid Location";
                }
}

0 comments

Answer accepted by question author

0 additional answers

Your answer

Answer 1

rbrundritt 21,711 Volunteer Moderator

Here is how you can call the time zone API from JavaScript:

var bingMapsKey = 'Your Bing Maps Key';

function getTimeZoneInfo(query){

	//Encode query as special characters in some addresses can cause issues.
	var query = `https://dev.virtualearth.net/REST/v1/timezone/?q=${encodeURIComponent(query)}&key=${bingMapsKey}`;
	
	
	fetch(query).then(r => r.json()).then(r => {
		if(r && r.resourceSets && r.resourceSets.length > 0 && r.resourceSets[0].resources && 
			r.resourceSets[0].resources.length > 0 && r.resourceSets[0].resources[0] && 
			r.resourceSets[0].resources[0].timeZoneAtLocation &&
			r.resourceSets[0].resources[0].timeZoneAtLocation.length > 0) {
			
			var result = r.resourceSets[0].resources[0].timeZoneAtLocation[0];
			
			var timez = result.timeZone[0].convertedTime.localTime;
			var timezone = result.timeZone[0].convertedTime.timeZoneDisplayName;
			
			var formattedTime = new Date(Date.parse(timez)).toTimeString();
						
			console.log(`Local time: ${formattedTime}`);
						
			//Optionally, get the local time without GMT offset and timezone name.
			formattedTime = formattedTime.substr(0, formattedTime.indexOf(' GMT-'));
			
			console.log(`Local time: ${formattedTime} ${timezone}`);
		
		} else {
			console.log('Unable to find timezone for location');
		}
	});
}

Anonymous

rbrundritt

I am trying to get latitude and longitude using the below line but I am facing error , please suggest.

	   var    latitude = r.resourceSets[0].resources[0].point.coordinates[0];
       var    longtitude = r.resourceSets[0].resources[0].point.coordinates[1];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
  <body>
	Location: <input type="text" name="a" id="a"><br>
<button onclick="getTimeZoneInfo(document.getElementById('a').value )">Submit</button>
</body>
</html>









<script>
var bingMapsKey = 'My Bing Maps Key';

function getTimeZoneInfo(query){

	//Encode query as special characters in some addresses can cause issues.
	var query = `https://dev.virtualearth.net/REST/v1/timezone/?q=${encodeURIComponent(query)}&key=${bingMapsKey}`;
	
	
	fetch(query).then(r => r.json()).then(r => {
		if(r && r.resourceSets && r.resourceSets.length > 0 && r.resourceSets[0].resources && 
			r.resourceSets[0].resources.length > 0 && r.resourceSets[0].resources[0] && 
			r.resourceSets[0].resources[0].timeZoneAtLocation &&
			r.resourceSets[0].resources[0].timeZoneAtLocation.length > 0) {
			
			var result = r.resourceSets[0].resources[0].timeZoneAtLocation[0];
			
			var timez = result.timeZone[0].convertedTime.localTime;
			var timezone = result.timeZone[0].convertedTime.timeZoneDisplayName;
			   var result2 = r.resourceSets[0].resources[0];
			var formattedTime = new Date(Date.parse(timez)).toTimeString();
		  	   var    latitude = r.resourceSets[0].resources[0].point.coordinates[0];
                  var    longtitude = r.resourceSets[0].resources[0].point.coordinates[1];	
		 //	console.log(latitude);
			 	 
                    	//Optionally, get the local time without GMT offset and timezone name.
			//formattedTime = formattedTime.substr(0, formattedTime.indexOf(' GMT-'));
formattedTime = formattedTime.substr(0, 8) +timezone;
			alert(formattedTime);
			console.log(`Local time: ${formattedTime} ${timezone}`);


		
		} else {
			console.log('Unable to find timezone for location');
		}
	});
}
</script>
</body>
</html>

rbrundritt 21,711 Reputation points Volunteer Moderator

2023-10-04T15:08:11.8433333+00:00
The time zone API doesn't return a point. The code:

var latitude = r.resourceSets[0].resources[0].point.coordinates[0]; var longtitude = r.resourceSets[0].resources[0].point.coordinates[1];

is how you get the point of the first result when calling the location/geocoding API.
Anonymous

2023-10-04T15:29:13.1+00:00

Ok thank you ,I will check other api
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

rbrundritt 21,711 Volunteer Moderator

Here you go:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type='text/javascript'>
        var map, searchManager;
		
		var bingMapsKey = 'Your Bing Maps Key';

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: bingMapsKey,
                center: new Microsoft.Maps.Location(@ViewData["lat"], @ViewData["long"]),
                zoom: 11
            });

            //Make a request to reverse geocode the center of the map.
            reverseGeocode();
			
			//Get the timezone information for the center of the map.
			getTimeZoneInfo(map.getCenter());
        }

        function reverseGeocode() {
            //If search manager is not defined, load the search module.
            if (!searchManager) {
                //Create an instance of the search manager and call the reverseGeocode function again.
                Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
                    searchManager = new Microsoft.Maps.Search.SearchManager(map);
                    reverseGeocode();
                });
            } else {
                var searchRequest = {
                    location: map.getCenter(),
                    callback: function (r) {
                        //Tell the user the name of the result.
                        alert(r.name);
                    },
                    errorCallback: function (e) {
                        //If there is an error, alert the user about it.
                        alert("Unable to reverse geocode location.");
                    }
                };

                //Make the reverse geocode request.
                searchManager.reverseGeocode(searchRequest);
            }
        }

		 function getTimeZoneInfo(query){
			var query = '';
	
			if(typeof query === 'string'){
				//Encode query as special characters in some addresses can cause issues.
				query = `https://dev.virtualearth.net/REST/v1/timezone/?q=${encodeURIComponent(query)}&key=${bingMapsKey}`;
			}
			else {
				//Assume query is a location coordinate.
				query = `https://dev.virtualearth.net/REST/v1/timezone/{query.latitude},{query.longitude}key=${bingMapsKey}`;
			}
			
			fetch(query).then(r => r.json()).then(r => {
				if(r && r.resourceSets && r.resourceSets.length > 0 && r.resourceSets[0].resources && 
					r.resourceSets[0].resources.length > 0 && r.resourceSets[0].resources[0] && 
					r.resourceSets[0].resources[0].timeZoneAtLocation &&
					r.resourceSets[0].resources[0].timeZoneAtLocation.length > 0) {
					
					var result = r.resourceSets[0].resources[0].timeZoneAtLocation[0];
					
					var timez = result.timeZone[0].convertedTime.localTime;
					var timezone = result.timeZone[0].convertedTime.timeZoneDisplayName;
					
					var formattedTime = new Date(Date.parse(timez)).toTimeString();
								
					console.log(`Local time: ${formattedTime}`);
								
					//Optionally, get the local time without GMT offset and timezone name.
					formattedTime = formattedTime.substr(0, formattedTime.indexOf(' GMT-'));
					
					console.log(`Local time: ${formattedTime} ${timezone}`);
				
				} else {
					console.log('Unable to find timezone for location');
				}
			});
		}        
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>

Share via

Bing Maps from C# to Javascript

0 additional answers

Your answer