Google Maps API JavaScript Not Running In Html File But Runs In W3schools

I attempted to get my current location and display in google-maps. for this:

  • I activated the Javascript API(in google.developers site).
  • got the key to access the api.
  • copied the code in the link below to a html file( inserting my key when "calling" the api, of course).

When I ran the html file in the browser, I received an alert giving the error InvalidKeyOrUnauthorizedURL, but it seems that I did everything right, and actually it seems I really did, because when I ran the exact code in the W3Schools tutorials ("Try it your self") the result showed me my location.

So after this context, I would like to know why I can't run this code directly on the browser, I mean, It's kind of OK using the w3schools but it's not the properly way and it's questioning why it's invalid.

observations: note that the file is not being hosted, it is my own computer. I tried to run in Opera and Chrome browser- and they both failed. I ran codes of google maps api successfully directly on the browser but they didn't need any key.




It's because you are not hosting it on the local server.

Your browser won't allow location request to go through even if you allow all sites to track your location.

Set up a server on the localhost interface and then try running it. It should work just fine.

PS. Your browser will tell you when any location requests are blocked. In Chrome there will be a small icon on the right hand side of the URL bar after a request for location has been made.