question

ErinDoherty-5379 avatar image
0 Votes"
ErinDoherty-5379 asked IoTGirl edited

Bing Maps API Key invalid

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://docs.microsoft.com/en-us/answers/questions/461456/problems-with-api-key.html


windows-maps
image.png (47.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

rbrundritt avatar image
0 Votes"
rbrundritt answered

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ErinDoherty-5379 avatar image
0 Votes"
ErinDoherty-5379 answered

132739-image.png



Hi rbrunditt,

Here's the URL: src="https://www.bing.com/api/maps/mapcontrol?callback=bingAPIReady"

No % characters in the key -

I'm debugging in the edge browser to try to find what credentials are being passed in - undefined.
o._mapOptions: Object
credentials: undefined


image.png (1.2 MiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

IoTGirl avatar image
0 Votes"
IoTGirl answered

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.