Magento 2 How To add Google Map in Ui Form

Question

I'm facing following issue while adding google map with an api key,

This site overrides Array.from() with an implementation that doesn't support iterables, which could cause Google Maps JavaScript API v3 to not work correctly.

Ui Form

<container name="vanuemarkers_container">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    
                </item>
            </argument>
            <htmlContent name="html_content">
              <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                    <item name="additionalClasses" xsi:type="string">admin__field</item>
                    <item name="label" xsi:type="string" translate="true">Group Title</item>
                 </item>
              </argument>
              <argument name="block" xsi:type="object">Custom_Module\Block\Adminhtml\Data\Map</argument>
           </htmlContent>
        </container>

Map.php

<?php

namespace Custom_Module\Block\Adminhtml\Data;


    class Map extends \Magento\Backend\Block\Template
    {
        public function __construct(
        Context $context,
        Data $helperData,
        array $data = []
    ) {
        
        $this->helperData = $helperData;
        parent::__construct($context, $data);
    }
        
        protected $_template = 'map/googlemap.phtml';

       
        public function getApiKey()
    {
        return $this->helperData->getConfigValue('event/general/api');
        
    }

googlemap.phtml

<div class ="map">
  <script>
        require([
            "https://maps.googleapis.com/maps/api/js?key=<?= $this->getApiKey() ?>"
        ], function () {
            var latitude = '<?= $eventdata->getLatitude() ?>',
                longitude = '<?= $eventdata->getLongitude() ?>';
            alert(latitude);
            var isDraggable = true;
            //var defaultzoom = '';
 
            

            function markerMap(latitude, longitude) {
                var mapLatLng = new google.maps.LatLng(latitude, longitude);
                var mapOptions = {
                    draggable: true,
                    zoom: 10,
                    center: mapLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    //styles: mapStyle
                };

                var map = new googleapis.maps.Map(document.getElementById("mpgooglemaps_map_<?= $block->getNameInLayout() ?>"), mapOptions);
                var marker = new google.maps.Marker({
                    draggable: true,
                    position: mapLatLng,
                   // icon: mapMarkerIcon,
                    animation: google.maps.Animation.DROP
                });
                marker.setMap(map);
            }

            markerMap(latitude, longitude);
        });
    </script>
    </div>

Let me know if anyone has solution.

Answer 1

Magento 2 use legacy-build.min.js (Prototype.js).This library overrides Array.form() method. Typically, this library is used in the admin panel. Therefore, the error is not reproduced on the front. You can remove the method override in legacy-build.min.js, this will remove the error in the console and the Google API will work correctly.

Answer 2

For anyone else finding this, the actual version used (in 2.4.6 at least) is lib\web\legacy-build.min.js. Remove "Array.form() = $A" from that file, until Magento actually test their map functionality and find it doesn't work properly.

To note also is that as of 2.4.6-p3, they are also missing multiple CSP directives in vendor\magento\module-page-builder\etc\csp_whitelist.xml. This is what I had to add:

<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="connect-src">
            <values>
                <value id="vimeo" type="host">vimeo.com</value>
                <value id="google-maps" type="host">maps.googleapis.com</value>
            </values>
        </policy>
        <policy id="frame-src">
            <values>
                <value id="youtube" type="host">*.youtube.com</value>
                <value id="youtube_nocookie" type="host">*.youtube-nocookie.com</value>
            </values>
        </policy>
        <policy id="script-src">
            <values>
                <value id="google-maps" type="host">maps.googleapis.com</value>
            </values>
        </policy>
        <policy id="img-src">
            <values>
                <value id="google-maps-images" type="host">maps.gstatic.com</value>
                <value id="google-maps" type="host">maps.googleapis.com</value>
            </values>
        </policy>
        <policy id="style-src">
            <values>
                <value id="google-maps-images" type="host">maps.gstatic.com</value>
                <value id="google-maps" type="host">maps.googleapis.com</value>
                <value id="google-fonts" type="host">fonts.googleapis.com</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Again, I just fixed the core in the hope that they get around to testing their stuff before the next release!

Answer 3

I have deleted Array.from=$A from the legacy-build.min.js, google maps work Again but other issue is divided, how can I solve this issue? can any one help please?