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

sage
1

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
2

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
3

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
4

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

5

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
7

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

8

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.