Skip to content

Commit

Permalink
fix(GoogleMapsAPIWrapper): run Google Maps Apis outside of Angular (#…
Browse files Browse the repository at this point in the history 
…1714)

Wrap all Google Maps APIs calls in the wrapper with runOutsideAngular

fixes: #815
  • Loading branch information
@mpienkowski @doom777
mpienkowski authored and doom777 committed Nov 5, 2019
1 parent 3549ccf commit 57685f2
Showing 1 changed file with 93 additions and 49 deletions.
142 changes: 93 additions & 49 deletions packages/core/services/google-maps-api-wrapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export class GoogleMapsAPIWrapper {
}

createMap(el: HTMLElement, mapOptions: mapTypes.MapOptions): Promise<void> {
return this._zone.runOutsideAngular( () => {
return this._zone.runOutsideAngular(() => {
return this._loader.load().then(() => {
const map = new google.maps.Map(el, mapOptions);
this._mapResolver(map as mapTypes.GoogleMap);
Expand All @@ -33,73 +33,89 @@ export class GoogleMapsAPIWrapper {
}

setMapOptions(options: mapTypes.MapOptions) {
this._map.then((m: mapTypes.GoogleMap) => { m.setOptions(options); });
return this._zone.runOutsideAngular(() => {
this._map.then((m: mapTypes.GoogleMap) => { m.setOptions(options); });
});
}

/**
* Creates a google map marker with the map context
*/
createMarker(options: mapTypes.MarkerOptions = {} as mapTypes.MarkerOptions, addToMap: boolean = true):
Promise<mapTypes.Marker> {
return this._map.then((map: mapTypes.GoogleMap) => {
if (addToMap) {
options.map = map;
}
return new google.maps.Marker(options);
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => {
if (addToMap) {
options.map = map;
}
return new google.maps.Marker(options);
});
});
}

createInfoWindow(options?: mapTypes.InfoWindowOptions): Promise<mapTypes.InfoWindow> {
return this._map.then(() => { return new google.maps.InfoWindow(options); });
return this._zone.runOutsideAngular(() => {
return this._map.then(() => { return new google.maps.InfoWindow(options); });
});
}

/**
* Creates a google.map.Circle for the current map.
*/
createCircle(options: mapTypes.CircleOptions): Promise<mapTypes.Circle> {
return this._map.then((map: mapTypes.GoogleMap) => {
if (typeof options.strokePosition === 'string') {
options.strokePosition = google.maps.StrokePosition[options.strokePosition];
}
options.map = map;
return new google.maps.Circle(options);
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => {
if (typeof options.strokePosition === 'string') {
options.strokePosition = google.maps.StrokePosition[options.strokePosition];
}
options.map = map;
return new google.maps.Circle(options);
});
});
}

/**
* Creates a google.map.Rectangle for the current map.
*/
createRectangle(options: mapTypes.RectangleOptions): Promise<mapTypes.Rectangle> {
return this._map.then((map: mapTypes.GoogleMap) => {
options.map = map;
return new google.maps.Rectangle(options);
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => {
options.map = map;
return new google.maps.Rectangle(options);
});
});
}

createPolyline(options: PolylineOptions): Promise<Polyline> {
return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
let line = new google.maps.Polyline(options);
line.setMap(map);
return line;
return this._zone.runOutsideAngular(() => {
return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
let line = new google.maps.Polyline(options);
line.setMap(map);
return line;
});
});
}

createPolygon(options: mapTypes.PolygonOptions): Promise<mapTypes.Polygon> {
return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
let polygon = new google.maps.Polygon(options);
polygon.setMap(map);
return polygon;
return this._zone.runOutsideAngular(() => {
return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
let polygon = new google.maps.Polygon(options);
polygon.setMap(map);
return polygon;
});
});
}

/**
* Creates a new google.map.Data layer for the current map
*/
createDataLayer(options?: mapTypes.DataOptions): Promise<mapTypes.Data> {
return this._map.then(m => {
let data = new google.maps.Data(options);
data.setMap(m);
return data;
return this._zone.runOutsideAngular(() => {
return this._map.then(m => {
let data = new google.maps.Data(options);
data.setMap(m);
return data;
});
});
}

Expand All @@ -109,10 +125,12 @@ export class GoogleMapsAPIWrapper {
* @returns {Promise<TransitLayer>} a new transit layer object
*/
createTransitLayer(options: mapTypes.TransitLayerOptions): Promise<mapTypes.TransitLayer>{
return this._map.then((map: mapTypes.GoogleMap) => {
let newLayer: mapTypes.TransitLayer = new google.maps.TransitLayer();
newLayer.setMap(options.visible ? map : null);
return newLayer;
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => {
let newLayer: mapTypes.TransitLayer = new google.maps.TransitLayer();
newLayer.setMap(options.visible ? map : null);
return newLayer;
});
});
}

Expand All @@ -122,10 +140,12 @@ export class GoogleMapsAPIWrapper {
* @returns {Promise<BicyclingLayer>} a new bicycling layer object
*/
createBicyclingLayer(options: mapTypes.BicyclingLayerOptions): Promise<mapTypes.BicyclingLayer>{
return this._map.then((map: mapTypes.GoogleMap) => {
let newLayer: mapTypes.BicyclingLayer = new google.maps.BicyclingLayer();
newLayer.setMap(options.visible ? map : null);
return newLayer;
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => {
let newLayer: mapTypes.BicyclingLayer = new google.maps.BicyclingLayer();
newLayer.setMap(options.visible ? map : null);
return newLayer;
});
});
}

Expand All @@ -145,47 +165,71 @@ export class GoogleMapsAPIWrapper {
}

clearInstanceListeners() {
this._map.then((map: mapTypes.GoogleMap) => {
google.maps.event.clearInstanceListeners(map);
return this._zone.runOutsideAngular(() => {
this._map.then((map: mapTypes.GoogleMap) => {
google.maps.event.clearInstanceListeners(map);
});
});
}

setCenter(latLng: mapTypes.LatLngLiteral): Promise<void> {
return this._map.then((map: mapTypes.GoogleMap) => map.setCenter(latLng));
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => map.setCenter(latLng));
});
}

getZoom(): Promise<number> { return this._map.then((map: mapTypes.GoogleMap) => map.getZoom()); }
getZoom(): Promise<number> {
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => map.getZoom());
});
}

getBounds(): Promise<mapTypes.LatLngBounds> {
return this._map.then((map: mapTypes.GoogleMap) => map.getBounds());
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => map.getBounds());
});
}

getMapTypeId(): Promise<mapTypes.MapTypeId> {
return this._map.then((map: mapTypes.GoogleMap) => map.getMapTypeId());
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => map.getMapTypeId());
});
}

setZoom(zoom: number): Promise<void> {
return this._map.then((map: mapTypes.GoogleMap) => map.setZoom(zoom));
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => map.setZoom(zoom));
});
}

getCenter(): Promise<mapTypes.LatLng> {
return this._map.then((map: mapTypes.GoogleMap) => map.getCenter());
return this._zone.runOutsideAngular(() => {
return this._map.then((map: mapTypes.GoogleMap) => map.getCenter());
});
}

panTo(latLng: mapTypes.LatLng | mapTypes.LatLngLiteral): Promise<void> {
return this._map.then((map) => map.panTo(latLng));
return this._zone.runOutsideAngular(() => {
return this._map.then((map) => map.panTo(latLng));
});
}

panBy(x: number, y: number): Promise<void> {
return this._map.then((map) => map.panBy(x, y));
return this._zone.runOutsideAngular(() => {
return this._map.then((map) => map.panBy(x, y));
});
}

fitBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral, padding?: number | mapTypes.Padding): Promise<void> {
return this._map.then((map) => map.fitBounds(latLng, padding));
return this._zone.runOutsideAngular(() => {
return this._map.then((map) => map.fitBounds(latLng, padding));
});
}

panToBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral, padding?: number | mapTypes.Padding): Promise<void> {
return this._map.then((map) => map.panToBounds(latLng, padding));
return this._zone.runOutsideAngular(() => {
return this._map.then((map) => map.panToBounds(latLng, padding));
});
}

/**
Expand Down

0 comments on commit 57685f2

Please sign in to comment.