Google API callback doesn't work

Question

I've created this javascript (delivery.js) that is supposed to take a pre-existing div on a webform page and append a Google Map to it, along with a few circles of differing radius.

Here is my libraries.yml, I reference the GoogleMaps global in the script url to be used as the callback.

delivery:
  version: 1.x
  js:
    js/delivery.js: {}
  dependencies:
  - core/jquery
  - core/drupalSettings
maps:
  js:
    'https://maps.googleapis.com/maps/api/js?key=AIzaSyCP9_LHyWKv821WTcLWZd8GcLLHIHvPPU0&callback=GoogleMaps.initMap&v=weekly':  { type: external, minified: true }

.module file attaching the libraries:

function order_form_webform_handler_form_alter(&$form, &$form_state, $form_id) {
    if($form_id == "webform_submission_order_submission_node_5_add_form" || $form_id == "webform_submission_order_submission_test_form" ){
        $form['#attached']['library'][] = 'order_form_webform_handler/delivery';
        $form['#attached']['library'][] = 'order_form_webform_handler/maps';
    }
}

Finally, my delivery.js file that does all the work:

var GoogleMaps = GoogleMaps || {};
(function ($, Drupal, GoogleMaps) {
  
    Drupal.behaviors.attachMap = {
      attach: function () {

        GoogleMaps.initMap = function(){
          // Create the map.
          const map = new google.maps.Map(document.getElementById("edit-map"), {
            zoom: 4,
            center: { lat: 44.24, lng: -76.57 },
            mapTypeId: "terrain",
          });

          let radii = [10000, 15000, 20000, 30000];

          for(let i = 0; i < radii.length; i++){
            const cityCircle = new google.maps.Circle({
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35, 
              map: map,
              center: { lat: 44.24, lng: -76.57 },
              radius: radii[i],
            });
          }
        }
      }
    };
  
  })(jQuery, Drupal, GoogleMaps);

However, when I try to run this, I get this error:

.te {message: 'GoogleMaps.initMap is not a function', stack: 'Error\n at _.te.captureStackTrace (https://maps.PPU0&callback=GoogleMaps.initMap&v=weekly:212:276', name: 'InvalidValueError'}

Is there a better method of invoking the callback that I don't know about?

Answer 1

You will need to ensure your library is loaded first, by creating it as a dependency of the first library:

delivery:
  version: 1.x
  js:
    js/delivery.js: {}
  dependencies:
  - core/jquery
  - core/drupalSettings

maps:
  js:
    'https://maps.googleapis.com/maps/api/js?key=AIzaSyCP9_LHyWKv821WTcLWZd8GcLLHIHvPPU0&callback=GoogleMaps.initMap&v=weekly':  { type: external, minified: true }
  dependencies:
  - order_form_webform_handler/delivery

Answer 2

I've finally managed to hobble this together in a working manner for me:

my_module.libraries.yml:

my_module:
  version: 1.x
  js:
    js/my-module.js: {}
  dependencies:
    - core/jquery
    - my_module/maps
maps:
  js:
    //maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=Function.prototype&libraries=places&v=weekly: { type: external, minified: true }

In the my_module.module file, I'm attaching the library in a hook_form_alter, but you may attach it in whatever function suits you...

$form['#attached']['library'][] = 'my_module/maps';
$form['#attached']['library'][] = 'my_module/my_module';

my-module.js:

// Initialize GoogleMaps object
let GoogleMaps = google.maps || {};

(function ($, Drupal, GoogleMaps) {

  Drupal.behaviors.myModuleMapsBehavior = {
    attach: function (context, settings) {

      GoogleMaps.fillInAddress = function () {
        console.log('fillInAddress');
        /* do something */
      };

      GoogleMaps.initMap = function () {
        console.log('initMap');
        GoogleMaps.fillInAddress();
        /* do something */
      };

      GoogleMaps.initMap();
    }
  };

})(jQuery, Drupal, GoogleMaps);

In the libraries file, I used the Function.prototype callback as described here: https://stackoverflow.com/a/75212692/1541757

In the first line of the js file, I had to change:

let GoogleMaps = GoogleMaps || {};

To ...

let GoogleMaps = google.maps || {};

I'm unsure if this is a Google API change or what, but this is working for me so far.

Answer 3

Found the fix, the attach: function(....) wrapper line was affecting the visibility of the initMap function. Removing that cleared the error. Dynamically loading the script with JS would work as well, but did not get to a point where I tried testing that.