| 1 |
/** |
| 2 |
* Block Google Maps |
| 3 |
*/ |
| 4 |
import { InitGoogleMaps } from './gmaps-api'; |
| 5 |
|
| 6 |
const { |
| 7 |
GHOSTKIT: { events, googleMapsAPIKey }, |
| 8 |
} = window; |
| 9 |
|
| 10 |
/** |
| 11 |
* Prepare Google Maps. |
| 12 |
*/ |
| 13 |
events.on(document, 'init.blocks.gkt', () => { |
| 14 |
if (!googleMapsAPIKey) { |
| 15 |
return; |
| 16 |
} |
| 17 |
|
| 18 |
document |
| 19 |
.querySelectorAll( |
| 20 |
'.ghostkit-google-maps:not(.ghostkit-google-maps-ready)' |
| 21 |
) |
| 22 |
.forEach(($this) => { |
| 23 |
$this.classList.add('ghostkit-google-maps-ready'); |
| 24 |
|
| 25 |
let styles = ''; |
| 26 |
let markers = ''; |
| 27 |
|
| 28 |
try { |
| 29 |
styles = JSON.parse($this.getAttribute('data-styles')); |
| 30 |
} catch (evt) {} |
| 31 |
|
| 32 |
const $markers = $this.querySelectorAll( |
| 33 |
'.ghostkit-google-maps-marker' |
| 34 |
); |
| 35 |
if ($markers.length) { |
| 36 |
markers = []; |
| 37 |
|
| 38 |
$markers.forEach(($marker) => { |
| 39 |
const markerData = $marker.dataset; |
| 40 |
|
| 41 |
const $infoWindow = $marker.querySelector( |
| 42 |
':scope .ghostkit-pro-google-maps-marker-info-window-text' |
| 43 |
); |
| 44 |
|
| 45 |
// info window |
| 46 |
if ($infoWindow) { |
| 47 |
markerData.infoWindowText = $infoWindow.innerHTML; |
| 48 |
} |
| 49 |
|
| 50 |
markers.push(markerData); |
| 51 |
}); |
| 52 |
|
| 53 |
// old way. |
| 54 |
} else if ($this.getAttribute('data-markers')) { |
| 55 |
try { |
| 56 |
markers = JSON.parse($this.getAttribute('data-markers')); |
| 57 |
} catch (evt) {} |
| 58 |
} |
| 59 |
|
| 60 |
InitGoogleMaps($this, { |
| 61 |
styles, |
| 62 |
markers, |
| 63 |
center: { |
| 64 |
lat: parseFloat($this.getAttribute('data-lat')), |
| 65 |
lng: parseFloat($this.getAttribute('data-lng')), |
| 66 |
}, |
| 67 |
zoom: parseInt($this.getAttribute('data-zoom'), 10), |
| 68 |
zoomControl: |
| 69 |
$this.getAttribute('data-show-zoom-buttons') === 'true', |
| 70 |
zoomControlOpt: { |
| 71 |
style: 'DEFAULT', |
| 72 |
position: 'RIGHT_BOTTOM', |
| 73 |
}, |
| 74 |
mapTypeControl: |
| 75 |
$this.getAttribute('data-show-map-type-buttons') === 'true', |
| 76 |
streetViewControl: |
| 77 |
$this.getAttribute('data-show-street-view-button') === |
| 78 |
'true', |
| 79 |
fullscreenControl: |
| 80 |
$this.getAttribute('data-show-fullscreen-button') === |
| 81 |
'true', |
| 82 |
scrollwheel: |
| 83 |
$this.getAttribute('data-option-scroll-wheel') === 'true', |
| 84 |
draggable: |
| 85 |
$this.getAttribute('data-option-draggable') === 'true', |
| 86 |
}); |
| 87 |
}); |
| 88 |
}); |
| 89 |
|
