cant load google maps in magento 2.4 nginx

Question

I cant load google maps in magento 2.4. I am using nginx as webserver and running the project in http => port 80 when I add google maps script

require([
 "http://maps.googleapis.com/maps/api/js?key=<?= /** @noEscape */ $apiKey ?>&libraries=places&v=weekly&language=fr"
], function () {
 const map = new google.maps.Map(document.getElementById("map"), {
 center: { lat: -33.8688, lng: 151.2195 },
 zoom: 13,
 mapTypeId: "roadmap",
 });
 // Create the search box and link it to the UI element.
 const input = document.getElementById("pac-input");
 const searchBox = new google.maps.places.SearchBox(input);
 map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
 // Bias the SearchBox results towards current map's viewport.
 map.addListener("bounds_changed", () => {
 searchBox.setBounds(map.getBounds());
 });
 let markers = [];
 // Listen for the event fired when the user selects a prediction and retrieve
 // more details for that place.
 searchBox.addListener("places_changed", () => {
 const places = searchBox.getPlaces();
 if (places.length == 0) {
 return;
 }
 // Clear out the old markers.
 markers.forEach((marker) => {
 marker.setMap(null);
 });
 markers = [];
 // For each place, get the icon, name and location.
 const bounds = new google.maps.LatLngBounds();
 places.forEach((place) => {
 if (!place.geometry || !place.geometry.location) {
 console.log("Returned place contains no geometry");
 return;
 }
 const icon = {
 url: place.icon,
 size: new google.maps.Size(71, 71),
 origin: new google.maps.Point(0, 0),
 anchor: new google.maps.Point(17, 34),
 scaledSize: new google.maps.Size(25, 25),
 };
 // Create a marker for each place.
 markers.push(
 new google.maps.Marker({
 map,
 icon,
 title: place.name,
 position: place.geometry.location,
 })
 );
 if (place.geometry.viewport) {
 // Only geocodes have viewport.
 bounds.union(place.geometry.viewport);
 } else {
 bounds.extend(place.geometry.location);
 }
 });
 map.fitBounds(bounds);
 });
 // Listen for the event fired when the user selects a prediction and retrieve
 // more details for that place.
 searchBox.addListener("places_changed", () => {
 const places = searchBox.getPlaces();
 if (places.length == 0) {
 return;
 }
 // Clear out the old markers.
 markers.forEach((marker) => {
 marker.setMap(null);
 });
 markers = [];
 // For each place, get the icon, name and location.
 const bounds = new google.maps.LatLngBounds();
 places.forEach((place) => {
 if (!place.geometry || !place.geometry.location) {
 console.log("Returned place contains no geometry");
 return;
 }
 const icon = {
 url: place.icon,
 size: new google.maps.Size(71, 71),
 origin: new google.maps.Point(0, 0),
 anchor: new google.maps.Point(17, 34),
 scaledSize: new google.maps.Size(25, 25),
 };
 // Create a marker for each place.
 markers.push(
 new google.maps.Marker({
 map,
 icon,
 title: place.name,
 position: place.geometry.location,
 })
 );
 if (place.geometry.viewport) {
 // Only geocodes have viewport.
 bounds.union(place.geometry.viewport);
 } else {
 bounds.extend(place.geometry.location);
 }
 });
 map.fitBounds(bounds);
 });
});

I get an error message in browser console

[Report Only] Refused to load the script 'https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Fmagento-front-marjane.com%2Ffr%2Fmultishipping%2Fcheckout_address%2FnewShipping%2F&4sAIzaSyDeEulUN4YxahgSWg-1xdz9ddAcCyHcp-Q&callback=xdc._1e0egw&key=AIzaSyDeEulUN4YxahgSWg-1xdz9ddAcCyHcp-Q&token=12865' because it violates the following Content Security Policy directive: "script-src assets.adobedtm.com secure.authorize.net test.authorize.net www.googleadservices.com www.google-analytics.com www.paypalobjects.com js.braintreegateway.com www.paypal.com geostag.cardinalcommerce.com 1eafstag.cardinalcommerce.com geoapi.cardinalcommerce.com 1eafapi.cardinalcommerce.com songbird.cardinalcommerce.com includestest.ccdc02.com www.sandbox.paypal.com t.paypal.com s.ytimg.com video.google.com vimeo.com www.vimeo.com www.youtube.com *.trackedlink.net *.trackedweb.net *.dotdigital-pages.com cdn.dnky.co api.comapi.com webchat.dotdigital.com *.google.com *.fontawesome.com *.googletagmanager.com *.gstatic.com *.facebook.net *.doubleclick.net *.bing.com *.ads-twitter.com https://www.googletagmanager.com tagmanager.google.com 'self' 'unsafe-inline' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

• Ben Crook: That is only a report and Google Maps is not being blocked. If Google maps isn't loading for you then it's most likely an issue with the JS you have written.
• lazy_coder: I found that there is a configuration in magento called csp_whitelist.xml added <values> <value id="google-maps" type="host">*.maps.googleapis.com</value></values> in each policy item, now the autocomplete is work but the map doesnt show up in the mage
• Ben Crook: Some other things to check - Do you have an element with the ID of map? If so, is there any HTML in there?
• Ben Crook: Also, "Ensure that the div element for the map has a height. By default, div elements are created with a height of 0, and are therefore invisible."
• lazy_coder: thanks for your helpe I added the height on div element that has id => map now the map is displayed

Answer 1

The fix for this is to ensure you add a height to the div, as taken from the docs:

Ensure that the div element for the map has a height. By default, div elements are created with a height of 0, and are therefore invisible.