I've extended magento 2 checkout page. Added shipping methods and custom fields to shipping method.Checkout page

Radio buttons are the list of locations. I need to add map for this locations. List of Locations were added to shipping method via extension attributes in plugin.

$extensionAttribute =  ($result->getExtensionAttributes())
        ? $result->getExtensionAttributes()
        : $this->extensionFactory->create();

Than overrided magento/module-checkout/view/frontend/web/template/shipping.html and added code for rendering locations

<td class="col col-stores">
     <!-- ko if:  method.carrier_code + '_' + method.method_code == 'pickup_from_store_pickup_from_store' -->
         <div class="available-stores" data-bind="visible: $parent.isSelected() == 'pickup_from_store_pickup_from_store'">
             <div class="store-search-input">
                    <input type="text">
                       data-bind="foreach: method.extension_attributes.stores">
                       <div class="store-row">
                            <input type="radio"
                                   value: $data.id,
                                   checked: $parentContext.$parent.selectedStore(),
                                   attr: {
                                       'id': 'store_id_' + $data.id,
                                       'name': 'offline_store'
                                   click: $parentContext.$parent.selectStore.bind(this, $data.id)

                           <span data-bind="text: $data.name"></span>
         <div id="map"></div>

<!-- /ko -->

I need to insert google map in<div id="map"></div> I've already included google maps library in separate block in it's phtml file.

<script src="https://maps.googleapis.com/maps/api/js?key=some_key&libraries=geometry"></script>

And in this template added also js that works with google api

<script type="text/x-magento-init">
    "*": {
        "Company_StoreSearch/js/store-search": {
            "stLocation": <?php echo $block->getStoreListJsonArray() ?>,
            "lpgLocation": <?php echo $storesByType['lpg'] ?>,
            "gardenLocation": <?php echo $storesByType['garden'] ?>,
            "extensiveToolSelectionLocation": <?php echo $storesByType['extensive_tool_selection'] ?>,
            "perishableLocation": <?php echo $storesByType['perishable'] ?>,
            "servicePointsLocation": <?php echo $storesByType['service_points'] ?>,
            "markerUrl": "<?php echo $block->getMarkerImageUrl() ?>",
            "locationMarkerUrl": "<?php echo $block->getLocationImageUrl() ?>",
            "searchUpdate": "<?php echo $block->getSearchUpdateUrl() ?>"

And added this block as child to 'checkout.root' in checkout_index_index.xml. Than render this block in onepage.phtml like

<?php echo $block->getChildHtml('store_search_map') ?>

in the end of template

But i don't get how can i render google maps. Checkout page renders using knockout js and when i want to apply google maps api to my div in shipping.html - it doesn't exist yet. I tried using $(document).ajaxStop(function () {...}), domReady! as parameter in my custom js. But nothing help. Please help me. Thanks.


1 Answer 1


I was working on applying place autocomplete on checkout an here is a snippet with my code:

<script src="https://maps.googleapis.com/maps/api/js?key=lll&libraries=places&callback=notifySubscribers"

    var notifySubscribers = function () {
        require(['GoogleAddressLookup/model/apiLoadListener'], function (loadListener) {

And my explanation. This phtml is rendered in after.body.start container and as you can see i basically do async load of google lib. The important part is that i pass callback function notifySubscribers. There as you can see i load my apiLoadListener class which is dedicated for holding information about the state of script in isGoogleApiLoaded ko observable. ApiLoadListener is by itself defined in separate file. Because isGoogleApiLoaded property is ko.observable then i can load apiListener module in any other module in which i can subscribe callback and execute appropriate logic. In your case it would be an initialization of google map on a particular element. I do it within onElementRender callback, here is an example snippet:

onElementRender: function (el) {
        if (!loadListener.isGoogleApiLoaded()) {
            loadListener.subscribe((isApiLoaded) => {
                if (isApiLoaded) {
                    this.initializer = new Initializer(el, Strategy, this.autocomplete_id);
        } else {
            this.initializer = new Initializer(el, Strategy, this.autocomplete_id);

As you can see, disregarding the unknown classes, i am basically listening for event dispatch from apiLoader to perform my logic. I hope that will help you out.

  • Can you please share code how you call onElementRender to load the google API shipping.html template? Oct 8, 2020 at 15:44
  • @Bartosz Herba can you please share code snippet to add map on checkout page Dec 25, 2020 at 13:24

Your Answer

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

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