Auto-adjust zoom and center as markers are added/deleted

[blangslet]

Hi Matt,
I was looking through your documentation and didn't see the gmaps.js fitZoom or fitLatLngBounds methods exposed.

My use case is very similar to the 'live' markersFitMode at https://github.com/asennikov/ember-g-map#map-fits-to-show-all-initial-markers that will auto-adjust zoom and center as markers are added/deleted, as well as when the viewport shrinks or expands.

I was wondering if I overlooked something, or if you had any quick tips to achieve these results. Thanks so much!

[Matt-Jensen]

This is a great feature idea @blangslet, however implementing this will have to take a backseat to #66, which is removing bower deps (aka Gmaps.js) and provides the same features, but more declaratively.

While all I can offer you currently is to add this to the roadmap, your use case can be achieved immediately with some kind of wrapper layer around a g-maps component, with some variation of the ember-g-map code here

[blangslet]

Thanks for the quick response @Matt-Jensen! I'll let you know if I come up with anything clean.

[marcemira]

Hello @blangslet @Matt-Jensen, I need that as well, ASAP. Is there any quick workaround to get that now? Thanks!

[Matt-Jensen]

@blangslet if you need it that soon, I'd extend this addon's g-maps component in your app with the ember-g-map code here

[marcemira]

@Matt-Jensen Brilliant! I'll do so, thank you so much for the quick response! :)

[ezy]

@Matt-Jensen thanks for the great plugin and feedback - am currently implementing the ember-g-map fitToMarkers() code as suggested above. When extending the component I've created a new Ember component component/g-maps-extend.js. But I'm struggling to fire the extension on the page I have my {{g-maps lat=lat lng=lng zoom=zoom}} hook. Any suggestions?

import Ember from 'ember';
// import gMaps from 'npm:ember-cli-g-maps';
// also tried loading the npm module via ember-browserify but no luck so far
import gMaps from 'ember-cli-g-maps/components/g-maps';

export default gMaps.extend({
  init() {
    console.log('g-maps extended');
  }
});

[Matt-Jensen]

This really seems to be a popular feature lately! Since any solution with this existing codebase will likely be too complicated for Github comments, if you (@ezy) would be willing to publish a repo we could collaborate on and link to from this issue... I'd be happy to help you.

[ezy]

I've managed to iron out the issues for this @Matt-Jensen so posting up here for anyone who finds it useful. My issue was calling {{g-maps}} rather than the new component name {{g-maps-extend}} in the template. So component extension should go as follows:

// /templates/index.hbs
{{g-maps-extend name="yourMapName" markers=markers}}

Then in the new component extension:

// /components/g-maps-extend.js
import Ember from 'ember';
import gMaps from 'ember-cli-g-maps/components/g-maps';

const { computed, isPresent } = Ember;

export default gMaps.extend({
  defaultGMapState: computed(function() {
    const markers = this.get('markers').filter((marker) => {
      return isPresent(marker.lat) && isPresent(marker.lng);
    });

    if (markers.length > 0 &&
        (typeof FastBoot === 'undefined')) {
      const map = this.get('map');
      const bounds = new google.maps.LatLngBounds();
      const points = markers.map((marker) => {
        return new google.maps.LatLng(marker.lat, marker.lng);
      });

      points.forEach((point) => bounds.extend(point));
      map.fitBounds(bounds);
    }
  })
});

I use a computed function in the controller to cycle through my Ember data and set the markers input to an array. This gets picked up by the markers hbs input and used in the fitBounds() calculation.