Bing Maps API Key invalid

Question

Programming Create-react-app with a Bing maps API Key, debugging using "yarn start" and Microsoft Edge Browser

Created a Bing Maps API key and put key in this App to test key (the keys weren't working in my create-react-app either)
https://stackblitz.com/edit/react-ts-cbgfsk?file=index.tsx

Keys don't work - get a message - "The specified credentials are invalid"

Tried 3 different keys - none of them work.

Context:
Found this related post that said go Azure maps instead:
https://learn.microsoft.com/en-us/answers/questions/461456/problems-with-api-key.html

Answer 1

It looks like you are using the information at Stack overflow but are missing the step to add the key.

export function loadBingApi(key?: string): Promise<void> {
const callbackName = "bingAPIReady";
let url = https://www.bing.com/api/maps/mapcontrol?callback=${callbackName};
if (key) {
url += &key=${key};
}

Answer 2

Start off by making sure you copied and pasted all the characters of the key and that there is no extra white spec before/after in your code. Take a look at the url being sent over the network and verify the key doesn't have any encoded characters in it (% character).