Configuring url of a require()'d dependency (JS newbie using patterns)

Plone Support
, ,
1

Hi all.
I'm trying to implement a Google Maps pattern for editing and storing a location (s). Currently I'm doing the following to include the google maps js in the pattern:

require([
  "jquery",
  "pat-base",
  "https://maps.googleapis.com/maps/api/js?libraries=places&key={myKey}"
], function($, Base) {
  "use strict";
  var Location = Base.extend({
    name: "location",
    parser: "mockup",
    trigger: ".location",
    default: {
      ...
    }
  },
  init: function() {
    ...
  }
}

My issue is that I now need the API key to be configurable. Ideally, this would be done though data-pat-location. My js is quite rough around the edges, and the concept of mockup/ patterns is a new one to me.

How can I require the googlemaps js but use data-pat to configure the api key in the url? Is patterns even the write way of implementing this or is there a better way of bundling the needed js for use across multiple pages/ page-templates and ensuring it's only included once in a page?

I'm aware of collective.geo, but it isn't suited to the needs of this project.

2

Hi @JeffersonBledsoe . Have yound and checked the training resources at https://training.plone.org/5/javascript/index.html ? It contains a chapter on require.js and mockup.

I'm myself still in the process of understanding it for 90+% so I can explain it properly to others. :blush:

One thing from your code snippet, the required libraries/modules are fed into the function as paramaters so that you have a handle. You don't need the googlemaps external reference injected into the function as a third variable?

3

The training resources are what got me this far with mockup! :slight_smile: Thanks for the suggestion @fredvd.

I ended up using jquery to defer loading the maps api until after mockup had initialised it's inputs. It works fine now, although I'd still be interested in knowing if there's a way of achieving a similar result with requirejs.