0
243
ViewsHow do I resolve "blocked by client" error resulting from embedding a Google Map into my website?
How do I display a Google Map without returning errors on my site? Looking into Google Maps API, but I don't know where to put the API and/or what code or script if any I should insert into my index file. I think the code I need is below, but not sure where to insert.
<script>
const CONFIGURATION = {
"locations": [
{
"title": "2987 Buford Hwy NE",
"address1": "2987 Buford Hwy NE",
"address2": "Atlanta, GA 30329, USA",
"coords": {
"lat": 33.83447587775393,
"lng": -84.33826650615158
},
"placeId": "ChIJTyS8_hkG9YgRtrRM3yyw-jQ"
}
],
"mapOptions": {
"center": {
"lat": 38.0,
"lng": -100.0
},
"fullscreenControl": true,
"mapTypeControl": false,
"streetViewControl": false,
"zoom": 4,
"zoomControl": true,
"maxZoom": 17
},
"mapsApiKey": "AIzaSyBBJ3fG2726Owavlyp1SeKhNnsKa95aWNo",
"capabilities": {
"input": true,
"autocomplete": false,
"directions": false,
"distanceMatrix": false,
"details": false,
"actions": false
}
};
function initMap() {
new LocatorPlus(CONFIGURATION);
}
</script>
I've obtained and configured API so that it's restricted. These are the errors.
2 answers
Answer question0
"Blocked by client" errors are typically caused by extensions. Have you tried disabling adblockers and refreshing the page?
0
Good news first
It works on my machine, MacOS - FireFox Developer Edition.
What I think is happening
I'm not seeing any CORS errors there, and if it was that it shouldn't be working on my machine.
This is very often caused by a plugin on your system blocking the content. Try disabling any content blocking plugins on your system and or whitelisting the URL to the maps API.
How to deal with it
If disabling the extension works, my advice is to add in some JavaScript to show fallback content if the map fails to load. Such as a static image of the map.
That way most users should get the 'full map' and any where the map fails to load will still see good content.