Required JS Assets

Dynamic Maps Only

This guide is only relevant if you are working with dynamic maps. The JavaScript assets described below are not relevant in any other context.

When creating a dynamic map with Twig or PHP, there are a couple of JavaScript files which will get automatically loaded on the front-end. These files are required to create and manage the embedded maps. Similarly, we will include a call to the Google Maps JavaScript API.

Combined, they produce an HTML snippet similar to this...

<script src="https://maps.googleapis.com/maps/api/js?key=[KEY]" defer></script>
<script src="https://yourwebsite.com/cpresources/[HASH]/js/googlemaps.js"></script>
<script src="https://yourwebsite.com/cpresources/[HASH]/js/dynamicmap.js"></script>

For various reasons, you may not want these files to be loaded automatically. It's possible to suppress the initial automatic loading of these assets, then manually load them later.

# Loaded Automatically

In addition to the Google Maps API reference, there are two JavaScript files which are required whenever a dynamic map is present. For your convenience, these files will be loaded into the page automatically.

# Disable Automatic Loading

If necessary, you can prevent the required assets from being loaded automatically. When the tag method is appended, simply set the assets value to false.

{{ googleMaps.map(locations).tag({'assets': false}) }}

For more info, see the complete list of options...

# Loaded Manually

Once you have disabled the automatic loading of these files, you will then be responsible for loading them manually. There are several ways to approach this, how you choose to go about it is up to you.

The simplest approach is to use to the loadAssets method.

{# Load the required JavaScript files #}
{% do googleMaps.loadAssets() %}

The loadAssets method will also accept an array of parameters, which will be appended to the Google Maps API URL. Anything that is permissible as an API URL parameter is permitted here.

For example, this is how you may apply Map IDs...

{# Append the specified Map ID to the API URL #}
{% do googleMaps.loadAssets({
    'map_ids': '1234'
}) %}

If you really don't want Twig/PHP to load the assets on your behalf, and you are determined to take matters into your own hands, there is one other tool available to you.

The getAssets method will retrieve the list of required JS assets as an array of required URLs. Once you have those URLs, you are free to load them into the page as you see fit.

{# Get an array of required URLs #}
{% set assets = googleMaps.getAssets() %}

Like loadAssets, the getAssets method can accept an optional array of API URL parameters.