Load Google Maps on demand

package-lock.json

@@ -5413,6 +5413,11 @@
         "invert-kv": "1.0.0"
       }
     },
+    "load-google-maps-api": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/load-google-maps-api/-/load-google-maps-api-1.3.2.tgz",
+      "integrity": "sha512-uc0kW24xpTtw2g1g3qIXGgFF+u2Rlp+7a1Hze7Esuz24tHkbblJH0LZGjRVZuL7mqIxEWp+lP7ANt1/OiZRJbA=="
+    },
     "load-json-file": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "iframe-resizer": "^3.5.5",
     "jquery": "^2.2.4",
     "jquery-lazy": "^1.7.4",
+    "load-google-maps-api": "^1.3.2",
     "moment": "^2.19.4",
     "normalize.css": "^7.0.0",
     "picturefill": "^3.0.2",

web/typo3conf/ext/ep_products/Configuration/TypoScript/setup.txt

@@ -35,6 +35,7 @@ plugin.tx_epproducts {
         searchLogIgnoreIps = {$plugin.tx_epproducts.settings.searchLogIgnoreIps}
         groupsPageUid = {$plugin.tx_eptheme.settings.groupsPageUid}
         groupsContactFormPageUid = {$plugin.tx_eptheme.settings.groupsContactFormPageUid}
+        googleMapsApiKey = {$plugin.tx_eptheme.settings.googleMapsApiKey}
         datePickerPresets {
             1 {
                label = Silvester

web/typo3conf/ext/ep_theme/Configuration/TypoScript/ContentElements/gmap.ts

@@ -4,5 +4,5 @@ tt_content.gmap {
     dataProcessing {
         10 = EP\EpTheme\DataProcessing\TeaserProcessor
     }
-    settings.teaserTextMaxChars = {$plugin.tx_eptheme.settings.teaserTextMaxChars}
+    settings.googleMapsApiKey = {$plugin.tx_eptheme.settings.googleMapsApiKey}
 }

web/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.ts

@@ -20,10 +20,6 @@ page {
     includeJSFooterlibs {
         manifest = EXT:ep_theme/Resources/Public/js/manifest.js
         vendor = EXT:ep_theme/Resources/Public/js/vendor.js
-        gmaps = {$plugin.tx_eptheme.settings.googleMapsJsApiUrl}
-        gmaps.external = 1
-        gmaps.async = 1
-        gmaps.disableCompression = 1
     }
 
     includeJSFooter {

web/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.txt

@@ -104,6 +104,8 @@ plugin.tx_eptheme {
 		googleStaticMapsBaseUrl = https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyDDOforD1O_j4xXy2nJybC2yQqbUAw9ClY
 		# cat=eptheme/300/120; type=string; label=Google Maps Js API Url
 		googleMapsJsApiUrl = https://maps.googleapis.com/maps/api/js?key=AIzaSyDDOforD1O_j4xXy2nJybC2yQqbUAw9ClY
+		# cat=eptheme/300/120; type=string; label=Google Maps Js API Url
+		googleMapsApiKey = AIzaSyDDOforD1O_j4xXy2nJybC2yQqbUAw9ClY
 
 		# cat=eptheme.events/700/100; type=string; label=Event date day from
 		eventDateDayFrom =

web/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.txt

@@ -69,6 +69,7 @@ plugin.tx_eptheme {
         bpnBookingUrlTemplateCode = {$plugin.tx_eptheme.settings.bpnBookingUrlTemplateCode}
         googleStaticMapsBaseUrl = {$plugin.tx_eptheme.settings.googleStaticMapsBaseUrl}
         googleMapsJsApiUrl = {$plugin.tx_eptheme.settings.googleMapsJsApiUrl}
+        googleMapsApiKey = {$plugin.tx_eptheme.settings.googleMapsApiKey}
         datePickerPresets < plugin.tx_epproducts.settings.datePickerPresets
         searchPageHeaderImage = {$plugin.tx_eptheme.settings.searchPageHeaderImage}
         showSkipassBadge = {$plugin.tx_eptheme.settings.showSkipassBadge}

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Gmap.vue

@@ -2,25 +2,28 @@
     <div class="gmap" ref="container"></div>
 </template>
 <script>
+    const loadGoogleMapsApi = require('load-google-maps-api');
+
     export default {
-        props: [ 'lat', 'lng', 'zoom', 'markers', 'desaturate' ],
+        props: [ 'lat', 'lng', 'zoom', 'markers', 'desaturate', 'apiKey' ],
         data () {
             return {
                 map: null,
                 mapOptions: {
                     streetViewControl: false,
                     scrollwheel: false,
-                    mapTypeIds: google.maps.MapTypeId.ROADMAP
+                    mapTypeIds: null
                 }
             }
         },
-        methods: {
+        mounted () {
-            initMap () {
+            loadGoogleMapsApi({ key: this.apiKey }).then(googleMaps => {
+                this.mapOptions.mapTypeIds = googleMaps.MapTypeId.ROADMAP;
                 if (this.zoom) {
                     this.mapOptions.zoom = this.zoom;
                 }
                 if (this.lat && this.lng) {
-                    this.mapOptions.center = new google.maps.LatLng(this.lat, this.lng);
+                    this.mapOptions.center = new googleMaps.LatLng(this.lat, this.lng);
                 }
                 if (this.desaturate) {
                     this.mapOptions.styles = [{
@@ -31,17 +34,17 @@
                         ]
                     }];
                 }
-                this.map = new google.maps.Map(this.$refs.container, this.mapOptions);
+                this.map = new googleMaps.Map(this.$refs.container, this.mapOptions);
                 if (this.markers.length) {
-                    const bounds = new google.maps.LatLngBounds();
+                    const bounds = new googleMaps.LatLngBounds();
-                    const infoWindow = new google.maps.InfoWindow({maxWidth: 200});
+                    const infoWindow = new googleMaps.InfoWindow({maxWidth: 200});
                     for (let item of this.markers) {
-                        let position = new google.maps.LatLng(item.lat, item.lng);
+                        let position = new googleMaps.LatLng(item.lat, item.lng);
-                        let marker = new google.maps.Marker({
+                        let marker = new googleMaps.Marker({
                             position: position,
                             map: this.map
                         });
-                        google.maps.event.addListener(marker, 'click', () => {
+                        googleMaps.event.addListener(marker, 'click', () => {
                             infoWindow.setContent('<div><strong>' + item.name + '</strong><br>' + item.teaser +
                                 '<br><a href="' + item.uri + '">zu den Details</a></div>');
                             infoWindow.open(this.map, marker);
@@ -50,10 +53,7 @@
                     }
                     this.map.fitBounds(bounds);
                 }
-            }
+            });
-        },
-        mounted () {
-            this.initMap();
         }
     }
 </script>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Gmap.html

@@ -9,9 +9,10 @@
     <f:section name="Content">
         <div class="row">
             <gmap
-                :lat="{hotel.latitude -> v:or(alternative: region.latitude)}"
+                lat="{hotel.latitude -> v:or(alternative: region.latitude)}"
-                :lng="{hotel.longitude -> v:or(alternative: region.longitude)}"
+                lng="{hotel.longitude -> v:or(alternative: region.longitude)}"
                 :zoom="17"
+                api-key="{settings.googleMapsApiKey}"
             ></gmap>
         </div>
     </f:section>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Map/General.html

@@ -4,7 +4,7 @@
     <f:layout name="Default"/>
 
     <f:section name="Main">
-        <gmap :markers="{markerData}" :zoom="17"></gmap>
+        <gmap :markers="{markerData}" :zoom="17" api-key="{settings.googleMapsApiKey}"></gmap>
     </f:section>
 
 </html>