Integrating Google Maps on specific page in sage 9

sage
,
5

Thank you @alwaysblank for your feedback and patience. Finally it works. I did update the app/setup.php as follows (now without &callback=window.initMap):

if (is_page( 'kontakt' )) {
        wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=' . env('GOOGLE_MAPS_API'), [], null, true);
}
wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);

And here my resources/assets/scripts/routes/kontakt.js with the initMap function:

const google = window.google;

export default {
    init() {
      // JavaScript to be fired on the kontakt page
    },
    finalize() {
      // JavaScript to be fired on the kontakt page, after the init JS
      /* eslint-disable no-unused-vars */
      $(function initMap() {
        let mapDiv = document.getElementById('map');
        let map = new google.maps.Map(mapDiv, {
          center: {
            lat: -34.397,
            lng: 150.644,
          },
          zoom: 8,
        });
      })
      /* eslint-disable no-unused-vars */
    },
};

Hope this post will be helpful to others as well.

Thanks,
Philipp