Load Google Maps on demand
This commit is contained in:
Björn Fromme
Generated
+5
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 =
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user