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.

brookhavenlaundry.com

< 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

CodePudding user response：

"Blocked by client" errors are typically caused by extensions. Have you tried disabling adblockers and refreshing the page?

CodePudding user response：

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.