1

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.

enter image description here

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.

2
  • Hi Mevada, I'm facing the same issue. Did you manage to get this working? Apr 16, 2021 at 10:48
  • No still i did not get any solution for this issue Apr 20, 2021 at 8:30

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.