Skip to content

Commit 3c2a592

Browse files
SippieCupSippieCup
committed
fix(google-maps): Use contextmenu for lazy emitter
1 parent 34d4ef4 commit 3c2a592

File tree

2 files changed

+68
-48
lines changed

2 files changed

+68
-48
lines changed

‎src/dev-app/google-map/google-map-demo.html

Lines changed: 67 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,54 @@
11
@if (hasLoaded) {
22
<div class="demo-google-map">
3-
<google-map height="400px"
4-
width="750px"
5-
[center]="center"
6-
[zoom]="zoom"
7-
(authFailure)="authFailure()"
8-
(mapClick)="handleClick($event)"
9-
(mapMousemove)="handleMove($event)"
10-
(mapRightclick)="handleRightclick()"
11-
[mapTypeId]="mapTypeId"
12-
[mapId]="mapId">
3+
<google-map
4+
height="400px"
5+
width="750px"
6+
[center]="center"
7+
[zoom]="zoom"
8+
(authFailure)="authFailure()"
9+
(mapClick)="handleClick($event)"
10+
(mapMousemove)="handleMove($event)"
11+
(mapRightclick)="handleRightclick()"
12+
[mapTypeId]="mapTypeId"
13+
[mapId]="mapId"
14+
>
1315
<map-marker-clusterer>
1416
<map-advanced-marker
1517
#firstMarker="mapAdvancedMarker"
1618
[position]="center"
17-
(mapClick)="infoWindow.open(firstMarker)"></map-advanced-marker>
19+
(mapClick)="infoWindow.open(firstMarker)"
20+
></map-advanced-marker>
1821
@for (markerPosition of markerPositions; track markerPosition) {
19-
<map-advanced-marker #marker="mapAdvancedMarker"
22+
<map-advanced-marker
23+
#marker="mapAdvancedMarker"
2024
[position]="markerPosition"
21-
(mapClick)="infoWindow.open(marker)"></map-advanced-marker>
25+
(mapClick)="infoWindow.open(marker)"
26+
></map-advanced-marker>
2227
}
2328
</map-marker-clusterer>
2429
@if (hasCustomContentMarker) {
2530
<map-advanced-marker
2631
#secondMarker="mapAdvancedMarker"
2732
(mapClick)="infoWindow.open(secondMarker)"
33+
(mapRightclick)="handleRightclick()"
2834
title="Advanced Marker"
2935
[gmpDraggable]="false"
3036
[content]="advancedMarkerContent"
31-
[position]="mapAdvancedMarkerPosition">
32-
<svg #advancedMarkerContent fill="oklch(69.02% .277 332.77)" viewBox="0 0 960 960" width="50px" height="50px" xml:space="preserve">
37+
[position]="mapAdvancedMarkerPosition"
38+
>
39+
<svg
40+
#advancedMarkerContent
41+
fill="oklch(69.02% .277 332.77)"
42+
viewBox="0 0 960 960"
43+
width="50px"
44+
height="50px"
45+
xml:space="preserve"
46+
>
3347
<g>
34-
<polygon points="562.6,109.8 804.1,629.5 829.2,233.1"/>
35-
<polygon points="624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8"/>
36-
<polygon points="384.1,539.3 575.2,539.3 479.6,307"/>
37-
<polygon points="396.6,109.8 130,233.1 155.1,629.5"/>
48+
<polygon points="562.6,109.8 804.1,629.5 829.2,233.1" />
49+
<polygon points="624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8" />
50+
<polygon points="384.1,539.3 575.2,539.3 479.6,307" />
51+
<polygon points="396.6,109.8 130,233.1 155.1,629.5" />
3852
</g>
3953
</svg>
4054
</map-advanced-marker>
@@ -55,7 +69,8 @@
5569
@if (isGroundOverlayDisplayed) {
5670
<map-ground-overlay
5771
[url]="groundOverlayUrl"
58-
[bounds]="groundOverlayBounds"></map-ground-overlay>
72+
[bounds]="groundOverlayBounds"
73+
></map-ground-overlay>
5974
}
6075
@if (isKmlLayerDisplayed) {
6176
<map-kml-layer [url]="demoKml"></map-kml-layer>
@@ -73,9 +88,7 @@
7388
<map-directions-renderer [directions]="directionsResult"></map-directions-renderer>
7489
}
7590
@if (isHeatmapDisplayed) {
76-
<map-heatmap-layer
77-
[data]="heatmapData"
78-
[options]="heatmapOptions"></map-heatmap-layer>
91+
<map-heatmap-layer [data]="heatmapData" [options]="heatmapOptions"></map-heatmap-layer>
7992
}
8093
</google-map>
8194

@@ -97,55 +110,61 @@
97110
<div>
98111
<label for="polyline-checkbox">
99112
Toggle Polyline
100-
<input type="checkbox" [(ngModel)]="isPolylineDisplayed">
113+
<input type="checkbox" [(ngModel)]="isPolylineDisplayed" />
101114
</label>
102115
</div>
103116
<div>
104117
<label for="editable-polyline-checkbox">
105118
Toggle Editable Polyline
106-
<input type="checkbox"
107-
[disabled]="!isPolylineDisplayed"
108-
[ngModel]="polylineOptions.editable"
109-
(ngModelChange)="editablePolylineChanged($event)">
119+
<input
120+
type="checkbox"
121+
[disabled]="!isPolylineDisplayed"
122+
[ngModel]="polylineOptions.editable"
123+
(ngModelChange)="editablePolylineChanged($event)"
124+
/>
110125
</label>
111126
</div>
112127

113128
<div>
114129
<label for="polygon-checkbox">
115130
Toggle Polygon
116-
<input type="checkbox" [(ngModel)]="isPolygonDisplayed">
131+
<input type="checkbox" [(ngModel)]="isPolygonDisplayed" />
117132
</label>
118133
</div>
119134
<div>
120135
<label for="editable-polygon-checkbox">
121136
Toggle Editable Polygon
122-
<input type="checkbox"
123-
[disabled]="!isPolygonDisplayed"
124-
[ngModel]="polygonOptions.editable"
125-
(ngModelChange)="editablePolygonChanged($event)">
137+
<input
138+
type="checkbox"
139+
[disabled]="!isPolygonDisplayed"
140+
[ngModel]="polygonOptions.editable"
141+
(ngModelChange)="editablePolygonChanged($event)"
142+
/>
126143
</label>
127144
</div>
128145

129146
<div>
130147
<label for="rectangle-checkbox">
131148
Toggle Rectangle
132-
<input type="checkbox" [(ngModel)]="isRectangleDisplayed">
149+
<input type="checkbox" [(ngModel)]="isRectangleDisplayed" />
133150
</label>
134151
</div>
135152
<div>
136153
<label for="editable-rectangle-checkbox">
137154
Toggle Editable Rectangle
138-
<input type="checkbox"
139-
[disabled]="!isRectangleDisplayed"
140-
[ngModel]="rectangleOptions.editable"
141-
(ngModelChange)="editableRectangleChanged($event)">
155+
<input
156+
type="checkbox"
157+
[disabled]="!isRectangleDisplayed"
158+
[ngModel]="rectangleOptions.editable"
159+
(ngModelChange)="editableRectangleChanged($event)"
160+
/>
142161
</label>
143162
</div>
144163

145164
<div>
146165
<label for="circle-checkbox">
147166
Toggle Circle
148-
<input type="checkbox" [(ngModel)]="isCircleDisplayed">
167+
<input type="checkbox" [(ngModel)]="isCircleDisplayed" />
149168
</label>
150169
</div>
151170
<div>
@@ -155,14 +174,15 @@
155174
type="checkbox"
156175
[disabled]="!isCircleDisplayed"
157176
[ngModel]="circleOptions.editable"
158-
(ngModelChange)="editableCircleChanged($event)">
177+
(ngModelChange)="editableCircleChanged($event)"
178+
/>
159179
</label>
160180
</div>
161181

162182
<div>
163183
<label for="ground-overlay-checkbox">
164184
Toggle Ground Overlay
165-
<input type="checkbox" [(ngModel)]="isGroundOverlayDisplayed">
185+
<input type="checkbox" [(ngModel)]="isGroundOverlayDisplayed" />
166186
</label>
167187
</div>
168188

@@ -181,42 +201,42 @@
181201
<div>
182202
<label for="kml-layer-checkbox">
183203
Toggle KML Layer
184-
<input type="checkbox" [(ngModel)]="isKmlLayerDisplayed">
204+
<input type="checkbox" [(ngModel)]="isKmlLayerDisplayed" />
185205
</label>
186206
</div>
187207

188208
<div>
189209
<label for="traffic-layer-checkbox">
190210
Toggle Traffic Layer
191-
<input type="checkbox" [(ngModel)]="isTrafficLayerDisplayed">
211+
<input type="checkbox" [(ngModel)]="isTrafficLayerDisplayed" />
192212
</label>
193213
</div>
194214

195215
<div>
196216
<label for="transit-layer-checkbox">
197217
Toggle Transit Layer
198-
<input type="checkbox" [(ngModel)]="isTransitLayerDisplayed">
218+
<input type="checkbox" [(ngModel)]="isTransitLayerDisplayed" />
199219
</label>
200220
</div>
201221

202222
<div>
203223
<label for="bicycling-layer-checkbox">
204224
Toggle Bicycling Layer
205-
<input type="checkbox" [(ngModel)]="isBicyclingLayerDisplayed">
225+
<input type="checkbox" [(ngModel)]="isBicyclingLayerDisplayed" />
206226
</label>
207227
</div>
208228

209229
<div>
210230
<label for="heatmap-layer-checkbox">
211231
Toggle Heatmap Layer
212-
<input type="checkbox" (click)="toggleHeatmapLayerDisplay()">
232+
<input type="checkbox" (click)="toggleHeatmapLayerDisplay()" />
213233
</label>
214234
</div>
215235

216236
<div>
217237
<label>
218238
Toggle Advanced Marker with custom content
219-
<input type="checkbox" [(ngModel)]="hasCustomContentMarker">
239+
<input type="checkbox" [(ngModel)]="hasCustomContentMarker" />
220240
</label>
221241
</div>
222242

‎src/google-maps/google-map/google-map.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
224224
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.rightclick
225225
*/
226226
@Output() readonly mapRightclick: Observable<google.maps.MapMouseEvent> =
227-
this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('rightclick');
227+
this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('contextmenu');
228228

229229
/**
230230
* See

0 commit comments

Comments
 (0)