Extending GMapAddressMarkerComponent

[FelixAkk]

Hi,
Ember-noob question I was hoping someone could help me out with. I'm having some trouble figuring how to make an extension. To illustrate, I have a rather staightforward use in my template right now. Just an address marker with an info window with some custom content:

{{#g-map markersFitMode="live" as |context|}}
  {{#g-map-address-marker context address=shop1.address as |markerContext|}}
    {{#g-map-infowindow markerContext}}
      <h5>{{shop1.name}}</h5>
      <p>{{shop1.address}}, {{shop1.postalCode}}, {{shop1.city}}</p>
    {{/g-map-infowindow}}
  {{/g-map-address-marker}}

  {!-- and lots more of such g-map-address-markers but with a different model --}

{{/g-map

Basically I have a whole list of shops/studios/etc on the map, and it would be nice to make a component that just takes a model as the source of the information so I don't have to repeat that code and structure it better. So I make my own component mp-map-location with the following code:

import Ember from 'ember';
import GMapAddressMarkerComponent from 'ember-g-map/components/g-map-address-marker';

export default GMapAddressMarkerComponent.extend({
  address: Ember.computed('location.address', 'location.postalCode', 'location.city', function() {
    this.get('location.address') + ', ' + this.get('location.postalCode') + ', ' + this.get('location.city');
  })
});

And the following template

{{#g-map-infowindow markerContext}}
  <h5>{{location.name}}</h5>
  <p>{{address}}</p>
{{/g-map-infowindow}}

Which I was naively hoping would allow me to simply use the following template code:

{{mp-map-location location=shop}}

Now in the original code there's {{#g-map-address-marker context address=general.address as |markerContext|}} which seems to do some essential context binding, and I'm just clueless on how to ensure that still happens with my extension. It's probably also why currently I get the error:

Uncaught Error: Assertion Failed: Must be inside {{#g-map}} or {{#g-map-marker}} components with context set

Sorry if this is not the best place to ask this but since it seemed pretty specific to this addon architecture. Any help on how to get this started is much appreciated!

[asennikov]

Hi!

For your case it's better not to extend it, but just make it a component which is calling g-map-address-marker inside it's template and transfer map context down to it.

ie:

{{!-- /template.hbs --}}
{{#g-map markersFitMode="live" as |context|}}
  {{mp-map-location location=shop mapContext=context}}
{{/g-map}}

// /mp-map-location/component.js
import Ember from 'ember';

export default Ember.Component.extend({
  address: Ember.computed('location.address', 'location.postalCode', 'location.city', function() {
    return this.get('location.address') + ', ' + this.get('location.postalCode') + ', ' + this.get('location.city');
  })
});

{{!--  /mp-map-location/template.hbs --}}
{{#g-map-address-marker mapContext address=address as |markerContext|}}
  {{#g-map-infowindow markerContext}}
    <h5>{{location.name}}</h5>
    <p>{{location.address}}, {{location.postalCode}}, {{location.city}}</p>
  {{/g-map-infowindow}}
{{/g-map-address-marker}}

[FelixAkk]

Thanks a lot! That indeed also works :)