Bing Maps Developer: Cannot use custom pushpin location from variable

Question

Hello,

I am trying to make a website where pushpins will be shown from database variables...

I cannot find how to put variable inside:

var pushpin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(myvariable), {

I am new to Bing maps, so any help is greatly appreciated.

Currently my whole script looks like this:

var variable1 = "83.8553649, 88.3939909";
var variable2 = "black";

            function loadMapScenario() {
            var map = new Microsoft.Maps.Map('#Map', {
            credentials: 'my api key is here ;)',
            center: new Microsoft.Maps.Location(63.881818, 88.455163),
            mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            zoom: 11
        });
        let center = map.getCenter();
        
        var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(63.855202, 88.417892), {
            color: variable2, //THIS WORKS
            enableClickedStyle:true,
            enableHoverStyle:true,
            visible:true
        });

        var pin2 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(63.866868, 88.41579), {
            text: 'HP',
            color: 'blue',
            enableClickedStyle:true,
            enableHoverStyle:true,
            visible:true
        });

        var pin3 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(variable2), {//PROBLEM HERE <---
            color: 'red',
            enableClickedStyle:true,
            enableHoverStyle:true,
            visible:true
        });

        //Add the pushpin to the map
        map.entities.push(pin1);//static pin, dont touch
        map.entities.push(pin2);//same as pin1
        map.entities.push(pin3);//need this one to change location
    }

Answer 1

In your example your variable2 value is "black" which isn't a coordinate/location, so that won't work. If you want to use variable1 as a coordinate/location ("83.8553649, 88.3939909") you will need to parse this into two numbers; latitude/longitude. If we assume that a comma will always be a separator between the values with the option for spaces as well, we can use the following code to parse the values. I'll also assume the first number is latitude, and the second is longitude (hard to tell with those numbers as they appear in the Artic Ocean.)

function parseStringLocation(val) {
	//Split on the comma and allow spaces on either side of the comma.
	var parts = val.split(/\s*,\s*/gi);
	
	//Ensure we have atleast two values.
	if(parts.length >= 2) {
		//Convert the first two string values to number objects.
		var lat = parseFloat(parts[0]);
		var lon = parseFloat(parts[1]);
		
		//Create a location object from the lat/lon value.
		return new Microsoft.Maps.Location(lat, lon);
	}
	
	return null;
}

You can then use this function like this to create a pin and add it to the map:

var loc3 = parseStringLocation(variable1);

//Ensure we were able to parse the value.
if(loc3) {
	var pin3 = new Microsoft.Maps.Pushpin(loc3, {
		color: 'red',
		enableClickedStyle:true,
		enableHoverStyle:true,
		visible:true
	});
		
	map.entities.push(pin3);
}