How to access map object

[sbsurf]

Hi,

I'm refactoring my code, which was using the google api directly, to use your component.

I'd like to do something like this on page load:

map.fitBounds(bounds);

But I'm not sure how to grab the map object. In my code it was created using:

var map = new google.maps.Map(this.$('#listings-map')[0])

[huafu]

You can add {{google-map ... googleObject=view.map}} then in the corresponding view you define this property map to null and add a hook on didInsertElelement:

fitBounds: function () {
  Ember.scheduleOnce('afterRender', this, function () {
    this.get('map').fitBounds(...);
  });
}

[sbsurf]

Thanks.

Do you think it's possible to do from the controller? I'd prefer not to use a view just for this.

[huafu]

Well it might be possible but this should be in a view and not a controller. While your controller can have a property computing the best value for use with fitBounds, it is the view which should call it since it depends on the render process.

Also your controller might be initialized and bound values changing while not even in the DOM and you can know this only from the view.

[huafu]

Oh also the didInsertElement hook is only for views of course.

Anyway when I'll have time I'm going to add 2 other options on the google-map at tributes list being auto-fit-bounds, array of either:

• string to point to a type of items rendered (markers, polylines, ...)
• {lat, lng} to make the point in the bounds ... or even just all or true to fit bounds for all objects on the map.

[huafu]

@sbsurf I just released 0.0.17 which is handling autoFitBound map option, so you don't even need to take care of it anymore, it'll fit the bounds to all objects in the map upon load when you sepcify {{google-map ... autoFitBounds=true}}

[sbsurf]

Very cool! Let me test it out tomorrow. Thanks!

[sbsurf]

It works. Fantastic! My code is getting shorter and shorter.

You know what else would be useful: being able to set a max zoom. I currently use it when there's one marker (or more than one but they are all very close to each other). My code:

  map.fitBounds(bounds);
  // Zoom out if too close:
  if (map.getZoom() > 16) {
    map.setZoom(16);
  }

So maybe add a maxZoom property, which would be used on page load, after autoFitBounds, to not allow the map get zoomed in too close.

[huafu]

Well this is very specific but I agree user might want to apply a max zoom with the auto fit bounds. In that case I might more setup it like fitBoundsMaxZoom. Will think about it thanks.

[sbsurf]

fitBoundsArray doesn't seem to work as I would expect. Seems like you only allow the bounds to use arrays used by other controller properties (e.g.: markers, circles, etc.). Wouldn't it make sense to allow any array (returned from specified controller property, for example) define the bounds?

For example, I am creating a different type of map now. No markers, no nothing. But I still want the map bounds to be set based on an array of coordinate objects (or any other format of data). I have bounds, but getting the zoom is difficult. Would be nice just to let the component set the zoom and center based on the bounds passed in.

The code would look like:

template:

{{google-map
  fitBoundsArray=bounds
}}

controller:

bounds: function(){
    ...
    return [{lat: lat1, lng: lng1}, {lat: lat2, lng: lng2}];
}.property('model')

I would also be OK with using the markers array, if there was a way not to display them.

Or am I misunderstanding something?

[huafu]

Yes, autoFitBounds is for only the stuff existing in the map. If you want to specify your own array, look at the option in the readme, it's called fitBoundsArray ;-)

[sbsurf]

I was actually talking about fitBoundsArray. I guess I'm not using it correctly. Seemed not to set the bounds based on a random property. I will take another look. Thanks!

[sbsurf]

OK, it works. I was getting confused by the map debug statement which shows zoom, center info not in line with what the map actually shows after the bounds fitting.

Maybe add a debug statement once the map is re-positioned?

[huafu]

Well actually I might remove soon all those debug lines. I know ember-cli removes them when building for prod, but it is kinda annoying to see this when you are looking for something in the console.

[sbsurf]

I like them. Maybe not for every single event, but for major events. I think having a logging level setting would be nice, so you can turn them on or off.