Roots Discourse

Could you tell me what is the best way for including the google maps api?

Hi @ll,

I’ve started working with bedrock/sage few days ago, so I’m a little bit lost…

I’m trying to guess how to load the google maps javascript api with no luck.

Can you tell me how to load the google api in the proper way?

Thank you in advance!!

:wink:

1 Like

How would you do it without Sage? This isn’t a Sage specific question and there’s multiple ways you can do it with WordPress.

1 Like

For a Sage equivalent of (as google maps example says):

<script>
        function initMap() {
          var mapDiv = document.getElementById('map');
          var map = new google.maps.Map(mapDiv, {
            center: {lat: 44.540, lng: -78.546},
            zoom: 8
          });
        }
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>

First, edit lib/assets.php to enqueue API script:

function add_scripts() {
  wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?callback=initMap', [], null, true);
}
add_action('wp_enqueue_scripts',  __NAMESPACE__ . '\\add_scripts');

Note namespace notation and true for the $in_footer argument at the end of wp_enqueue_script function.

And, second, put the initMap function in assets/scripts/main.js, inside $():

'common': {
      init: function() {
        $(function initMap() {
          var mapDiv = document.getElementById('mapa');
          var map = new google.maps.Map(mapDiv, {
            center: {lat: 44.540, lng: -78.546},
            zoom: 8
          });
        })
      },
2 Likes

Hi I tried this but there’s an error:
Uncaught InvalidValueError: initMap is not a function

I got this to work by removing &callback=initMap, so:

wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', ['sage/js'], null, true);

The map still works and initMap still exists within the Sage namespace in main.js.

Unless I’m missing something this seems to prevent the js error yet allow everything to work as it should. Hope this helps?

2 Likes

Did you solve the problem for initMap is not a function ? Or a solution … Thank you !
:innocent:

I put the Google API key (among others, like the ACF PRO key and other plugin keys) into trellis vault.yml and fetch it as environment variable either in site plugin or site theme.