Bing Maps API Key invalid

Erin Doherty 21 Reputation points
2021-09-14T17:41:43.783+00:00

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.
132101-image.png

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

Windows Maps
Windows Maps
A Microsoft app that provides voice navigation and turn-by-turn driving, transit, and walking directions.
253 questions
0 comments No comments
{count} votes

Accepted answer
  1. IoTGirl 2,976 Reputation points Microsoft Employee
    2021-09-18T00:21:38.013+00:00

    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};
    }


1 additional answer

Sort by: Most helpful
  1. rbrundritt 16,066 Reputation points Microsoft Employee
    2021-09-15T14:21:29.943+00:00

    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).