All geek questions in one place

How to load image of static google maps using javascript

Right now I can use this URL to request a Google Static Maps image successfully:

http://maps.google.com/staticmap?center=37.687,-122.407&zoom=8&size=450x300&maptype=terrain&key=[my key here]&sensor=false

However, the second I use jQuery or any direct javascript to set the src image to the above URL, Google returns a 400 error:

"Your customer has issued an incorrect or illegal request."

I read that this is usually due to the wrong key, but my key is explicitly being passed.

This is how I dynamically set the image:

document.getElementById('my-image-id').src = "http://maps.google.com/staticmap?center=37.687,-122.407&zoom=8&size=450x300&maptype=terrain&key=[my key here]&sensor=false"

I replaced [my key here] with my correct key, and it still does not work. When I request the same URL through the browser, everything is fine. I confirmed that the right sources also pass.

Any ideas?

+3
3

( - )?

<html>
<head>
<script language="javascript">
    function swap() {
        document.getElementById('my-image-id').src = "http://maps.google.com/staticmap?center=37.687,-122.407&zoom=8&size=450x300&maptype=terrain&key=&sensor=false"
    }
</script>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="450" height="300" onClick="swap();" id="my-image-id" />
</body>
</html>
+8

g :

&key=[my key here]g
+1

The problem is with the key. Register a new key and add it. It will work fine. I even had the same problem. He worked with direct paste in the address bar of the browser. But he did not work in production. I put in a new key and it worked great both in production and in the browser.

+1
source

Source: https://habr.com/ru/post/1710190/

More articles:


All Articles