I am currently writing a web application using Google Maps JavaScript API v3 (jobadvisor.scriptonite.be)(DUTCH).
The application is online for a couple of months now and everything was working just fine. But then at the start of this month, I started adjusting my source code in local host. After a week I updated everything on my localhost an left it there.
So, FTR:
Then 2 weeks went by, but now, when I try to GET a location(on the application, the closest bakery), the console returns the error:
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/xml?location=51.053…ance&types=bakery&sensor=false&key=AIzaSyDQOMaCyapoFRbaagiFUZ3qRGk1UJni7nk.
Origin http://www.jobadvisor.scriptonite.be is not allowed by Access-Control-Allow-Origin.
So the error is definitely not in the code, old application's code was fine(it worked for 3 months), and the updated application also worked before I left it for 2 weeks. I think Google has blocked some sort of permission in my API Key.
I think the error is raised by Cross-Origin XMLHttpRequest because the send and receive data don't have the same origin policy. Google doesn't allow access anymore on this my API-key. I've read something about that your site, hosting the app, has to be on a proxy-server, but that's no option for me...
Does anybody know how to prevent this error?
Answer by @Dr.Molle:
Use the places-library to request places-results on clientside: https://developers.google.com/maps/documentation/javascript/places#place_search_requests