Closed fayimora closed 7 years ago
I decided to wrap GMaps in a custom component and set these attributes there... Something like:
//components/g-maps/component.js
export default GMaps.extend({
mapService: inject.service('map'),
clickableIcons: false,
disableDefaultUI: computed.alias('mapService.props.disableDefaultUI'),
disableDoubleClickZoom: computed.alias('mapService.props.disableDoubleClickZoom'),
draggable: computed.alias('mapService.props.draggable'),
scrollwheel: computed.alias('mapService.props.scrollwheel'),
showMapTypeControl: computed.alias('mapService.props.showMapTypeControl'),
showScaleControl: computed.alias('mapService.props.showScaleControl'),
showZoomControl: computed.alias('mapService.props.showZoomControl'),
mapType: computed.alias('mapService.props.mapType'),
zoom: computed.alias('mapService.props.zoom'),
lat: computed.alias('mapService.lat'),
lng: computed.alias('mapService.lng'),
markers: computed.alias('mapService.markers'),
didInsertElement() {
this._super(...arguments);
const map = get(this, 'map');
set(this, 'mapService.mapInstance', map);
},
actions: {
loaded() {
set(this, 'mapService.loaded', true);
}
}
});
mapService
is a custom service where all map computations happen. The map lives throughout the lifecycle of the app so all computations and changes(across routes) are handled by the service.
Stil interested in knowing if there'a better way to do this.
If you're looking to persist variables across map renders and routes this could be a reasonable way to do it. However most of the time a container component around the g-maps presentational component will do the job most people need.
According to the README, I have to set all the map's attributes directly in the controller of in the template(handlebars helper). Is there a way to do this without littering the controller with these attributes? I was hoping to fetch the map's instance and pass in some props. Something like: