| 1 |
import scriptjs from 'scriptjs'; |
| 2 |
|
| 3 |
const { |
| 4 |
GHOSTKIT: { events, googleMapsAPIKey, googleMapsAPIUrl }, |
| 5 |
} = window; |
| 6 |
|
| 7 |
export function InitGoogleMaps(element, options, callback) { |
| 8 |
const { |
| 9 |
markers, |
| 10 |
apiUrl = `${googleMapsAPIUrl}&key=${googleMapsAPIKey}`, |
| 11 |
onZoomChange, |
| 12 |
onCenterChange, |
| 13 |
...restOptions |
| 14 |
} = options; |
| 15 |
|
| 16 |
scriptjs(apiUrl, () => { |
| 17 |
events.trigger(element, 'prepare.googleMaps.gkt', { |
| 18 |
options, |
| 19 |
}); |
| 20 |
|
| 21 |
const instance = new window.google.maps.Map(element, restOptions); |
| 22 |
|
| 23 |
// add gestureHandling |
| 24 |
const gestureHandling = element.getAttribute('data-gesture-handling'); |
| 25 |
if (instance && gestureHandling === 'cooperative') { |
| 26 |
instance.setOptions({ |
| 27 |
gestureHandling, |
| 28 |
scrollwheel: options.scrollwheel ? null : options.scrollwheel, |
| 29 |
}); |
| 30 |
} |
| 31 |
|
| 32 |
if (markers && markers.length) { |
| 33 |
markers.forEach((markerData) => { |
| 34 |
addMarker({ |
| 35 |
map: instance, |
| 36 |
lat: markerData.lat, |
| 37 |
lng: markerData.lng, |
| 38 |
title: markerData.title, |
| 39 |
description: markerData.infoWindowText, |
| 40 |
iconURL: markerData.iconUrl, |
| 41 |
iconWidth: markerData.iconWidth, |
| 42 |
iconHeight: markerData.iconHeight, |
| 43 |
}); |
| 44 |
}); |
| 45 |
} |
| 46 |
|
| 47 |
// Events. |
| 48 |
if (onZoomChange) { |
| 49 |
instance.addListener('zoom_changed', () => { |
| 50 |
onZoomChange(instance.getZoom()); |
| 51 |
}); |
| 52 |
} |
| 53 |
if (onCenterChange) { |
| 54 |
instance.addListener('center_changed', () => { |
| 55 |
onCenterChange(instance.getCenter()); |
| 56 |
}); |
| 57 |
} |
| 58 |
|
| 59 |
events.trigger(element, 'prepared.googleMaps.gkt', { |
| 60 |
options, |
| 61 |
instance, |
| 62 |
}); |
| 63 |
|
| 64 |
if (callback) { |
| 65 |
callback(instance); |
| 66 |
} |
| 67 |
}); |
| 68 |
} |
| 69 |
|
| 70 |
export function addMarker(data) { |
| 71 |
const { |
| 72 |
map, |
| 73 |
lat, |
| 74 |
lng, |
| 75 |
title, |
| 76 |
description, |
| 77 |
iconURL, |
| 78 |
iconWidth, |
| 79 |
iconHeight, |
| 80 |
...rest |
| 81 |
} = data; |
| 82 |
|
| 83 |
let icon = null; |
| 84 |
const thereIsIcon = iconURL && iconWidth && iconHeight; |
| 85 |
if (thereIsIcon) { |
| 86 |
icon = { |
| 87 |
url: iconURL, |
| 88 |
scaledSize: new window.google.maps.Size(iconWidth, iconHeight), |
| 89 |
}; |
| 90 |
} |
| 91 |
|
| 92 |
const position = new window.google.maps.LatLng(lat, lng); |
| 93 |
|
| 94 |
const marker = new window.google.maps.Marker({ |
| 95 |
map, |
| 96 |
position, |
| 97 |
title, |
| 98 |
icon, |
| 99 |
...rest, |
| 100 |
}); |
| 101 |
|
| 102 |
let infoWindow = null; |
| 103 |
|
| 104 |
if (description || title) { |
| 105 |
let content = ''; |
| 106 |
|
| 107 |
if (title) { |
| 108 |
content += `<h3>${title}</h3>`; |
| 109 |
} |
| 110 |
if (description) { |
| 111 |
content += description; |
| 112 |
} |
| 113 |
|
| 114 |
infoWindow = new window.google.maps.InfoWindow({ |
| 115 |
content, |
| 116 |
}); |
| 117 |
|
| 118 |
marker.addListener('click', () => { |
| 119 |
infoWindow.open(map, marker); |
| 120 |
}); |
| 121 |
} |
| 122 |
|
| 123 |
return { marker, infoWindow }; |
| 124 |
} |
| 125 |
|
