Search code examples
javascriptgoogle-mapsgeolocationlocalhostjsfiddle

Google map doesn't get displayed in Localhost and JSFiddle (Geolocation)

I'm trying to run this example:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map

in JSFiddle:

https://jsfiddle.net/y8p1x4jf/

Now the example works in the W3Schools editor. But when I run it on JSFiddle or Localhost, I see:

https://image.prntscr.com/image/SGCYoshnSi_cR3IFNn7Y_Q.png

And on localhost, I see the same:

https://image.prntscr.com/image/OIDuIh7nQlCldsUZ3qI9RQ.png

But the map displays fine if I paste the W3Schools example code in a .html file and then open that via the browser.

Why is it that it keeps showing broken image link in JSFiddle and Localhost? I think that it has to do with the geolocation. When I copy the url of the broken image and change the lat & lng on that url, the image then works fine.

When I visit the broken image url, in my browsers address bar I see the folowing error: The Google Maps API server rejected your request. Invalid request. Missing the 'size' parameter.

Solution

  • Yes it is the site. Look at the response in network.

    The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key. Request received from IP address 76.76.254.34, with referer: https://fiddle.jshell.net/_display/.

    You have to get a key and you can call it in https://developers.google.com/maps/documentation/javascript/get-api-key