|
1 | | -$(() => { |
2 | | - $('#map').dxMap({ |
3 | | - apiKey: 'YOUR_API_KEY', |
| 1 | +function initMap() { |
| 2 | + const map = $('#map').dxMap({ |
| 3 | + center: '49.47805, -123.84716', |
| 4 | + zoom: 14, |
4 | 5 | width: 1200, |
5 | 6 | height: 620, |
6 | | - zoom: 14, |
7 | | - center: '49.47805, -123.84716', |
8 | 7 | provider: 'google', |
| 8 | + apiKey: { |
| 9 | + google: 'YOUR_API_KEY', |
| 10 | + }, |
| 11 | + providerConfig: { |
| 12 | + mapId: 'DEMO_MAP_ID', |
| 13 | + }, |
9 | 14 | onReady(s) { |
10 | | - const map = s.originalMap; |
11 | | - const homeLatLng = new google.maps.LatLng(49.47805, -123.84716); |
| 15 | + const googleMap = s.originalMap; |
| 16 | + |
| 17 | + const createMarkerContent = (price, opacity = 1) => { |
| 18 | + const content = document.createElement('div'); |
| 19 | + content.className = 'labels'; |
| 20 | + content.textContent = price; |
| 21 | + content.style.opacity = opacity; |
| 22 | + return content; |
| 23 | + }; |
12 | 24 |
|
13 | | - const marker1 = new MarkerWithLabel({ |
14 | | - position: homeLatLng, |
15 | | - draggable: false, |
16 | | - clickable: false, |
17 | | - map, |
18 | | - labelContent: '$425K', |
19 | | - labelAnchor: new google.maps.Point(-21, 3), |
20 | | - labelClass: 'labels', // the CSS class for the label |
21 | | - labelStyle: { opacity: 0.75 }, |
| 25 | + const marker1 = new google.maps.marker.AdvancedMarkerElement({ |
| 26 | + map: googleMap, |
| 27 | + position: { lat: 49.47805, lng: -123.84716 }, |
| 28 | + content: createMarkerContent('$425K', 0.75), |
| 29 | + // eslint-disable-next-line spellcheck/spell-checker |
| 30 | + gmpDraggable: false, |
| 31 | + // eslint-disable-next-line spellcheck/spell-checker |
| 32 | + gmpClickable: false, |
22 | 33 | }); |
23 | 34 |
|
24 | | - const marker2 = new MarkerWithLabel({ |
25 | | - position: new google.maps.LatLng(49.475, -123.84), |
26 | | - draggable: true, |
27 | | - map, |
28 | | - labelContent: '$395K', |
29 | | - labelAnchor: new google.maps.Point(-21, 3), |
30 | | - labelClass: 'labels', // the CSS class for the label |
31 | | - labelStyle: { opacity: 1.0 }, |
| 35 | + const marker2 = new google.maps.marker.AdvancedMarkerElement({ |
| 36 | + map: googleMap, |
| 37 | + position: { lat: 49.475, lng: -123.84 }, |
| 38 | + content: createMarkerContent('$395K', 1.0), |
| 39 | + // eslint-disable-next-line spellcheck/spell-checker |
| 40 | + gmpDraggable: true, |
32 | 41 | }); |
33 | 42 | }, |
34 | | - }); |
| 43 | + }).dxMap('instance'); |
| 44 | +} |
| 45 | + |
| 46 | +window.initMap = initMap; |
| 47 | + |
| 48 | +$(() => { |
| 49 | + if (window.google && window.google.maps) { |
| 50 | + initMap(); |
| 51 | + } |
35 | 52 | }); |
0 commit comments