Load Google Maps on demand

2018-06-06 18:19:15 +02:00
parent 5a6b5bc387
commit f66999e1ae
10 changed files with 30 additions and 23 deletions
@@ -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: {
-            initMap () {
+        mounted () {
+            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 infoWindow = new google.maps.InfoWindow({maxWidth: 200});
+                    const bounds = new googleMaps.LatLngBounds();
+                    const infoWindow = new googleMaps.InfoWindow({maxWidth: 200});
                    for (let item of this.markers) {
-                        let position = new google.maps.LatLng(item.lat, item.lng);
-                        let marker = new google.maps.Marker({
+                        let position = new googleMaps.LatLng(item.lat, item.lng);
+                        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>
@@ -9,9 +9,10 @@
    <f:section name="Content">
        <div class="row">
            <gmap
-                :lat="{hotel.latitude -> v:or(alternative: region.latitude)}"
-                :lng="{hotel.longitude -> v:or(alternative: region.longitude)}"
+                lat="{hotel.latitude -> v:or(alternative: region.latitude)}"
+                lng="{hotel.longitude -> v:or(alternative: region.longitude)}"
                :zoom="17"
+                api-key="{settings.googleMapsApiKey}"
            ></gmap>
        </div>
    </f:section>
@@ -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>