0

I created a google map popup in checkout page. I want to load the google map script url.

currently i am doing like this in my google-map-loader.js

define([
...
'https://maps.googleapis.com/maps/api/js?key=MY-API-KEY&libraries=places&z=18'
], function (
.......
google
) {
'use strict';

return Component.extend({
    defaults: {
        template: 'Ayakil_GoogleMapAddressLookup/googlemaplink',
    },
---my other codes going here

entire functionality is working fine with me in this way. But i want to get the API Key from modules system configuration section and load it here?

How can i achieve this?

1 Answer 1

0

I used checkout ConfigProviderInterface to achieve this task.

Created the di.xml file under Ayakil/GoogleMapAddressLookup/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\CompositeConfigProvider">
   <arguments>
       <argument name="configProviders" xsi:type="array">
           <item name="google_map_key" xsi:type="object">Ayakil\GoogleMapAddressLookup\Model\GoogleMapApiKey</item>
       </argument>
   </arguments>

GoogleMapApiKey.php file content

<?php
namespace Ayakil\GoogleMapAddressLookup\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\App\Config\ScopeConfigInterface;

class GoogleMapApiKey implements ConfigProviderInterface
{
public function __construct(ScopeConfigInterface $scopeConfig)
{
    $this->scopeConfig = $scopeConfig;
}

public function getConfig()
{
    $additionalVariables['Google_key'] = $this->scopeConfig->getValue("googlemapaddresslookup/general/googleapikey");
    return $additionalVariables;
}
}

In the js file i got the setup variable as below

**window.checkoutConfig.Google_key**

'https://maps.googleapis.com/maps/api/js?key='+window.checkoutConfig.Google_key+'&libraries=places'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.